認識webpack

1111.png

安裝webpack

全局安裝webpack
npm install webpack -g 

指定版本號全局安裝webpack
npm install webpack@版本號 -g 

局部安裝webpack（開發(fā)環(huán)境）
1.cd 對應(yīng)目錄
2.npm install webpack --save-dev

區(qū)分全局和局部银觅，主要是為了有些時候 版本號不同的情況下打包出來的文件也不同
1.在終端（cmd終端或者vscode的terminal等）直接執(zhí)行webpack命令，使用的是全局安裝的webpack
2.在package.json文件中scripts 腳本中坏为，如果使用了webpack命令究驴，首先會找局部webpack，找不到才會找全局匀伏。

配置webpack

1.npm init 洒忧，初始化生成 package.json文件
2.創(chuàng)建webpack.config.js文件
3.設(shè)置入口文件和出口文件
4.webpack 和package.json 的腳本（scripts）綁定使用-》npm run xx 打包運行

const path = require("path");
module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

package.json scripts腳本模塊
"scripts": {
    "build": "webpack"
  },

終端直接運行：npm run build
即可打包以main.js為入口的相互引用的各種js，css等文件,
合并生成dist目錄下的bundle.js
目錄結(jié)構(gòu)

2222.png

main.js文件

//使用commonJs的模塊化規(guī)范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));

//使用es6的模塊化規(guī)范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);

//把css 文件當成 模塊導入
require("./style/main.css");

//依賴less文件
require("./style/normal.less");

webpack中l(wèi)oader的使用

loader 官方地址
webpack本身的能力來說够颠，可以處理我們寫的js代碼熙侍，并且會自動處理js之間相關(guān)的依賴，但是開發(fā)中不僅僅有基本的js代碼處理，還需要加載css蛉抓，圖片牢硅，包括將less scss等轉(zhuǎn)換為css，.vue文件轉(zhuǎn)成js文件等
對于webpack本身的能力來說芝雪，轉(zhuǎn)化這些是不支持的减余，所以就需要給webpack進行擴展，也就是loader
loader 主要是用于轉(zhuǎn)換某些類型的模塊惩系，是一個轉(zhuǎn)換器位岔。
使用過程
1.通過npm安裝需要使用的loader
2.在webpack.config.js 中module->rules關(guān)鍵字下進行配置

最常用的loader：

1. 樣式loader

less-loader
1.創(chuàng)建.less 文件

@width: 10px;

body {
 font-size: @width;
 color: yellow;
}

2.安裝 sass-loader：

npm install sass-loader sass webpack --save-dev

3.webpack.config.js 配置rulues

const path = require("path");
module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        //css-loader 只負責講css文件進行加載
        //style-loader 負責將樣式添加到dom中
        //使用多個loader時，依次加載順序從右邊到左邊
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // 將 JS 字符串生成為 style 節(jié)點
          "style-loader",
          // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
          "css-loader",
          // 將 Sass 編譯成 CSS
          "sass-loader",
        ],
      },
    ],
  },
};

2.圖片處理loader

1.安裝url-loader和file-loader

npm install url-loader  file-loader --save-dev

2.配置webpack.config.js rules

{
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              //當加載的圖片 小于limit時8k 會將圖片編譯Base64字符串形式
              //當加載的圖片 大于limit時8k 需要使用file-loader模塊進行加載
              limit: 8192, //限制大小可以修改
            },
          },
        ],
      },

3.在css中設(shè)置背景url圖片

body {
    /* background: green; */
    background: url('../img/test.png');
  }

webpack自動幫助我們生成一個圖片放在dist目錄下堡牡，這個圖片的名字很長抒抬，是一個32位的hash值，目的是防止名字重復(fù)晤柄。
實際項目中擦剑，可能對打包的圖片名字有一定要求，并且要將所有的圖片放在一個文件夾中芥颈，所有需要在webpack中rules 添加一定的配置--name

 options: {
              //當加載的圖片 小于limit時8k 會將圖片編譯Base64字符串形式
              //當加載的圖片 大于limit時8k 需要使用file-loader模塊進行加載
              limit: 8192, //限制大小可以修改
              name:'img/[name].[hash:8].[ext]'
            },

img-->圖片要打包的文件夾
[name]-->獲取圖片原來的名字
[hash:8]-->防止圖片命名沖突惠勒，依然使用hash，但是只保留8位
ext-->使用圖片原來的擴展名

3333.png

file-loader 可以指定要復(fù)制和放置資源文件的位置爬坑，以及如何使用版本哈希命名以獲得更好的緩存纠屋。此外，這意味著 你可以就近管理圖片文件盾计，可以使用相對路徑而不用擔心部署時 URL 的問題售担。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑為正確的 URL署辉。

url-loader 允許你有條件地將文件轉(zhuǎn)換為內(nèi)聯(lián)的 base-64 URL (當文件小于給定的閾值)族铆，這會減少小文件的 HTTP 請求數(shù)。如果文件大于該閾值哭尝，會自動的交給 file-loader 處理哥攘。

Vue Loader

vue-loader是一個 webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件
如果你不想手動設(shè)置 webpack刚夺，我們推薦使用 Vue CLI 直接創(chuàng)建一個項目的腳手架献丑。通過 Vue CLI 創(chuàng)建的項目會針對多數(shù)常見的開發(fā)需求進行預(yù)先配置末捣，做到開箱即用侠姑。

1.起步配置，安裝loader

npm install -D vue-loader vue-template-compiler

2.配置webpack
Vue Loader 的配置和其它的 loader 不太一樣箩做。除了通過一條規(guī)則將 vue-loader 應(yīng)用到所有擴展名為 .vue 的文件上之外莽红，請確保在你的 webpack 配置中添加 Vue Loader 的插件：

5555.png

3.創(chuàng)建vue文件，通過template 顯示view

webpack plugin的使用

plugin官方文檔
plugin 插件列表
loader 用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)安吁，對現(xiàn)有的框架進行擴展醉蚁。包括：打包優(yōu)化，資源管理鬼店，注入環(huán)境變量网棍。
使用一個插件，你只需要 require() 它妇智，然后把它添加到 plugins 數(shù)組中滥玷。
多數(shù)插件可以通過選項(option)自定義。
你也可以在一個配置文件中因為不同目的而多次使用同一個插件巍棱，這時需要通過使用 new 操作符來創(chuàng)建它的一個實例惑畴。
plugin使用過程
1.通過npm安裝需要使用的plugins（某些webpack已經(jīng)內(nèi)置的插件不需要安裝）
2.在webpack.config.js中的plugins中配置插件
常用的幾個webpack插件

1.添加版權(quán)信息的plugin BannerPlugin 屬于webpack自帶的插件

1.const webpack = require("webpack");
2. new webpack.BannerPlugin("最終版權(quán)歸付小影子所有"),

webpack 自帶的 版權(quán)說明插件，會在dist目錄中生成bundle.js.LICENSE.txt 文本文件

7777.png

2.HtmlWebpackPlugin

HtmlWebpackPlugin 簡化了 HTML 文件的創(chuàng)建航徙，以便為你的 webpack 包提供服務(wù)如贷。這對于那些文件名中包含哈希值，并且哈希值會隨著每次編譯而改變的 webpack 包特別有用到踏。你可以讓該插件為你生成一個 HTML 文件杠袱，使用 lodash 模板提供模板，或者使用你自己的 loader
該插件將為你生成一個 HTML5 文件窝稿， 在 body 中使用 script 標簽引入你所有 webpack 生成的 bundle
1.npm 安裝plugin

npm install --save-dev html-webpack-plugin

2.webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  其他配置...

  plugins: [new HtmlWebpackPlugin()],
};

3. js壓縮的插件 uglifyjs-webpack-plugin

1.npm 安裝插件

npm install uglifyjs-webpack-plugin --save-dev

2.webpack.config.js 配置插件

6666.png

webpack 搭建本地服務(wù)器 webpack-dev-server

webpack 提供了一個可選的本地開發(fā)服務(wù)器霞掺，這個本地服務(wù)器基于node.js搭建，內(nèi)部使用express框架讹躯，可以實現(xiàn)讓瀏覽器自動刷新修改后的效果菩彬，不用每一次都執(zhí)行打包命令。
1.安裝webpack-dev-server

npm install -D webpack-dev-server,
npm install webpack-cli@3 -D

2.配置webpack.config.js 中devserver選項

devServer: {
    contentBase: "./dist", // 服務(wù)器訪問的文件目錄
    open: true, //是否是立即打開
    port: 8080, //端口號
    host: "localhost", //鏈接地址
  },
3.在package.json 的scripts腳本配置中添加 webpack-dev-server的配置

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
4.終端執(zhí)行命令 npm run dev 潮梯，打開項目骗灶，修改項目內(nèi)容的時候，也不需要重新打包編譯
ctrl+c退出本地服務(wù)器

webpack中配置vue

1.npm 安裝 vue

npm install vue --save

2.入口js文件中秉馏，創(chuàng)建vue對象耙旦，綁定到index.html 中
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
    </div>
</body>
</html>

main.js

import Vue from "vue";
import App from "./APP";

//使用commonJs的模塊化規(guī)范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));

//使用es6的模塊化規(guī)范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);

//把css 文件當成 模塊導入
require("./style/main.css");

//依賴less文件
require("./style/normal.less");

//方式1
new Vue({
  el: "#app", //在index.html，創(chuàng)建div 設(shè)置id為app
  components: { App },
  template: "<App/>",
});

//方式2
// new Vue({
//   render: (h) => h(App),
// }).$mount("#app");

webpack 配置文件拆分 開發(fā)環(huán)境配置和生產(chǎn)環(huán)境配置

1.安裝webpack-merge

npm install webpack-merge --save-dev

2.拆分config ->baseCongig devConfig,proConfig,通過webpackMerge合并萝究，動態(tài)配置

8888.png

const path = require("path");
//vue加載插件
const { VueLoaderPlugin } = require("vue-loader");
//生成HTML文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    // publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        //css-loader 只負責講css文件進行加載
        //style-loader 負責將樣式添加到dom中
        //使用多個loader時免都，依次加載順序從右邊到左邊
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // 將 JS 字符串生成為 style 節(jié)點
          "style-loader",
          // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
          "css-loader",
          // 將 Sass 編譯成 CSS
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              //當加載的圖片 小于limit時8k 會將圖片編譯Base64字符串形式
              //當加載的圖片 大于limit時8k 需要使用file-loader模塊進行加載
              limit: 8192, //限制大小可以修改
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  resolve: {
    //導入文件 省略擴展后綴名
    extensions: [".js", ".css", ".vue"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@pages": path.resolve(__dirname, "../src/pages"),
      "@style": path.resolve(__dirname, "../src/style"),
      "@img": path.resolve(__dirname, "../src/img"),
      "@component": path.resolve(__dirname, "../src/component"),
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html", // 打包后的文件名，默認是index.html
      template: path.resolve(__dirname, "../src/index.html"), // 導入被打包的文件模板
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
  ],
};

pro-webpack-config.js

const webpack = require("webpack");
//js文件壓縮插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");

module.exports = WebpackMerge.merge(baseConfig, {
  plugins: [
    //webpack 自帶的 版權(quán)說明插件帆竹，會在dist目錄中生成bundle.js.LICENSE.txt 文本文件
    new webpack.BannerPlugin("最終版權(quán)歸付小影子所有"),
    new UglifyJsPlugin(),
  ],
});

dev-webpack-config.js

const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");

module.exports = WebpackMerge.merge(baseConfig, {
  devServer: {
    contentBase: "./dist", // 服務(wù)器訪問的文件目錄
    open: true, //是否是立即打開
    port: 8080, //端口號
    host: "localhost", //鏈接地址
  },
});

package.json --config 指定配置文件

  "scripts": {
    "build": "webpack --config ./build/pro.webpack.js",
    "dev": "webpack-dev-server --config ./build/dev.webpack.config.js"
  },

[測試demo地址]（https://github.com/fuxiaoyingzi/MeetWebpack）