前言

什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換 文件優化 代碼分割 模塊合并 自動刷新 代碼校驗 自動發布) 首先學習webpack 需要有簡單的node 基礎 ，打開node 官方網站進行安裝node, nodejs.cn/ 下載最新版node包并進行安裝。

學習目標：

webpack 常見配置 webpack高級配置

webpack優化策略

AST抽象語法樹

webpack中的Tapable

掌握webpack流程 手寫 webpack

手寫webpack中常見的loader

手寫webpack 中常見的plugin

定義好學習目標讓我們開啟webpack 的新旅程。（本文學習主要針對webpack4.0 進行學習講解）

---

webpck--->基礎搭建與使用：

安裝完畢在終端 快速創建node項目 執行命令npm init -y 生成packge.json
在當前目錄安裝本地webpack 終端執行命令： npm i webpack webpack-cli -d i表示install ,d表示當前是開發環境安裝完成會產生node_modules文件 webpack 可以進行0配置 并且webpack是打包工具(默認是js模塊 通過入口進行打包輸出打包后js結果)。
創建src目錄 --> 創建index.js -> 輸出:console.log("hello webpack");
npx 語法進行把index.js 進行打包
終端執行命令： npx webpack 我們發現當前目錄生成了一個dist 目錄并且創建了一個main.js(如圖:)

執行順序:(默認找node_modules--->bin文件 --> webpack文件 )

這里我們明白了安裝webpack 必須安裝他的依賴 webpack-cli webpack打包默認支持js模塊化 ->類似于common.js

webpack:兩種默兩種模式如果沒有創建webpack.config.js 配置文件指定mode (production/development)生成模式或開發模式，打包運行會直接默認生產模式打包并且進行壓縮。
這里說一下webpack配置文件的默認名稱有兩種 （webpack.config.js / webpackfile.js 一般情況下我們會選擇前一種）

如何手動配置webpack呢？其實比較簡單

(1)創建webpack.config.js 配置文件 由于webpack是node.js的框架所以配置文件中要采用node語法來進行編輯。

const path = require("path"); //webpack內部方法path組件
module.exports = {
  mode: "development", //打包模式 development開發模式
  entry: "./src/index.js", //入口文件指定
  output: {
    //出口文件配置 配置出口打包路徑
    filename: "build.js", //打包后的文件名稱
    path: path.resolve(__dirname, "build") //resolve絕對路徑引入
  }
};

我們分析一下build.js 打包出的結果,默認下是一個匿名函數 并且接收兩個參數 接收一個對象,Key : value (key:是當前模塊的路徑 value：是一個執行函數)

接收到modules 里 先定義一個緩存對象 installedModules先定一個緩存目的是如果我當前模塊加載完成沒有必要再進行加載
webpack_require 實現了一個require方法因為瀏覽器無法直接執行node的require方法 (詳解如圖)

執行__webpack_require__ 發現接收了一個入口模塊

終端運行： npx webpack , 發現我們打包當前目錄產生了文件夾build目錄
分析了一下打包文件是不是感覺webpack 源碼沒有想象的那么難 繼續我們webpack 的探索之旅。
如何更改webpack 配置文件名稱呢其實很簡單重命名webpack.config.js (webpack.test.js)
執行命令: npx webpack --config webpack.test.js 發現可以執行webpack打包。
這樣打包我發現命令很長所以我們利用packge.json 來配置打包腳本在scripts-->添加build.

"scripts": {
 "test": "echo "Error: no test specified" && exit 1",
 "build": "webpack --config webpack.config.js"
}
```
終端運行 npm run build  發現執行打包結果一樣.   
(2)webpack 其他配 -->置插件的使用不會生成文件會生成內存中的打包  
安裝webpck內置服務 webpack-dev-server 好處是 
終端執行命令: npm i webpack-dev-server -d -save
安裝完成可以執行 npx webpack-dev-server 按提示打開http://localhost:8080/ 
如何配置開發服務運行目錄可以在配置文件中添加在webpack.config.js添加devServer
````JavaScript
const path = require("path");
module.exports = {
mode: "development", //打包模式
entry: "./src/index.js", //入口文件指定
output: {
 //出口文件配置 配置出口打包路徑
 filename: "build.js", //打包的文件名稱
 path: path.resolve(__dirname, "build") //resolve絕對路徑引入
},
devServer: {
 //開發服務器配置
 contentBase: "./build", //指向打包目錄
 port: 3000, //服務端口號
 progress: true, //打包進度
 open: true, //是否打開瀏覽器
 compress: false //是否壓縮
}
};

在packge.json中添加start 啟動服務腳本

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start":"webpack-dev-server"
  }

運行 npm run start 發現沒有自動創建index.html 不能直觀看到我們代碼在瀏覽器的執行。 在src目錄下創建html模板 index.html 并安裝 html-webpack-plugin 插件
終端運行: npm i -d html-webpack-plugin
在webpack.config.js 下添加插件配置plugins

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", //打包模式
  entry: "./src/index.js", //入口文件指定
  output: {
    //出口文件配置 配置出口打包路徑
    filename: "build[hash:8].js", //打包的文件名稱 filename: "build[hash:8] 添加哈希值
    path: path.resolve(__dirname, "build") //resolve絕對路徑引入
  },
  devServer: {
    //開發服務器配置
    contentBase: "./build", //指向打包目錄
    port: 3000, //服務端口號
    progress: true, //打包進度
    open: true, //是否打開瀏覽器
    compress: false //是否壓縮
  },
  //插件
  plugins: [
    //數組形式 存放所有的webpack插件
    new HtmlWebPackPlugin({
      filename: "index.html", //生成打包文件名
      template: "./src/index.html", //模板路徑
      minify: { //生產模式可以進行配置
        removeAttributeQuotes: true, //刪除 html文件雙引號
        collapseWhitespace: true //折疊控行
      },
      hash:true, //添加哈希值
    })
  ]
};

終端執行打包測試：npm run build (build目錄下生成了我們想要生成的index.html文件)

樣式的配置 webpack配置css模塊:

配置樣式需要一個合適loader,loader會將我們的樣式文件解析成模塊(module)
終端：npm i -d --save css-loader style-loader
如何使用樣式loader進行配置呢？ 我們先在src下建index.css并給body賦予簡單樣式 在webpack.config.js 進行簡單配置
css-loader主要解析我們樣式中@import語法,style-loader是吧css樣式插入head標簽中.

+ module: {
    //添加模塊模塊是對象
    rules: [
      //規則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"] //執行順序是重右向左執行 - >重下到上
      }
    ]
  }

在index.js中引入樣式文件 import "./index.css"
終端運行:npm run start 樣式生效了同樣我們也有對應的less less-loader
終端：npm i -d --save less less-loader 在這里說一下loader 的另一種寫法對象寫法可以給loader添加一些屬性options

+ module: {
    //添加模塊模塊是對象
    rules: [
      //規則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: [ 
           {
            loader: "style-loader",
            options: {
              insertAt: "top" //把標簽插入頂部
            }
          }, 
          "css-loader"
          ] //執行順序是重右向左執行 - >重下到上
      },
      {
        test: /.less$/,
        use: [
            {
            loader: "style-loader",
            options: {
              insertAt: "top" //把標簽插入頂部
            }
          }, 
          "css-loader",
          "less-loader"
        ] //執行順序是重右向左執行 - >重下到上
      }
    ]
  }

css 樣式的抽離 安裝抽離插件 mini-css-extract-plugin npm i -d --save mini-css-extract-plugin
引入插件并在配置文件中進行配置

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MinCssExtractPlugin = require("mini-css-extract-plugin"); //抽離css插件
module.exports = {
 mode: "development", //打包模式
 entry: "./src/index.js", //入口文件指定
 output: {
   //出口文件配置 配置出口打包路徑
   filename: "[name][hash:8].js", //打包的文件名稱 filename: "build[hash:8] 添加哈希值
   path: path.resolve(__dirname, "build") //resolve絕對路徑引入
 },
 devServer: {
   //開發服務器配置
   contentBase: "./build", //指向打包目錄
   port: 3000, //服務端口號
   progress: true, //打包進度
   open: true, //是否打開瀏覽器
   compress: false //是否壓縮
 },
 //插件
 plugins: [
   //數組形式 存放所有的webpack插件
   new HtmlWebPackPlugin({
     filename: "index.html", //生成打包文件名
     template: "./src/index.html", //模板路徑
     minify: {
       removeAttributeQuotes: true, //刪除 html文件雙引號
       collapseWhitespace: true //折疊控行
     },
     hash: true //添加哈希值
   }),
   new MinCssExtractPlugin({
     filename: "mian.css"
   })
 ],
 module: {
   //添加模塊模塊是對象
   rules: [
     //規則 css-loader主要解析我們樣式中@import語法
     {
       test: /.css$/,
       use: [
         MinCssExtractPlugin.loader, //創建link標簽放入到main.css里
         "css-loader"
       ] //執行順序是重右向左執行 - >重下到上
     },
     {
       test: /.less$/,
       use: [
         MinCssExtractPlugin.loader, //創建link標簽放入到main.css里
         "css-loader",
         "less-loader"
       ] //執行順序是重右向左執行 - >重下到上
     }
   ]
 }
}

添加樣式前綴 postcss-loader autoprefixer
npm i postcss-loader autoprefixer -d

 module: {
    //添加模塊模塊是對象
    rules: [
      //規則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: [
          MinCssExtractPlugin.loader, //創建link標簽放入到main.css里
          "css-loader",
          "postcss-loader"
        ] //執行順序是重右向左執行 - >重下到上
      },
      {
        test: /.less$/,
        use: [
          MinCssExtractPlugin.loader, //創建link標簽放入到main.css里
          "css-loader",
           "postcss-loader",
          "less-loader" 
        ] //執行順序是重右向左執行 - >重下到上
      }
    ]
 }

注意 postcss-loader 需要添加一個配置文件否則不會生效更目錄創建postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")]
};

但是我們發現問題使用mini-css-extract-plugin插件導致我們css不會被壓縮。
npm 官網有給出To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:參考鏈接

要使用optimize-css-assets-webpack-plugin 插件接下來我們安裝配置一下.
npm i -d optimize-css-assets-webpack-plugin

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮js
//配置文件中添加優化項
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  }

使用optimize-css-assets-webpack-plugin我們發現js右不會被壓縮 所以要使用uglifyjs-webpack-plugin --save-dev $ npm install uglifyjs-webpack-plugin --save-dev 配置產考鏈接

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮js
//配置文件中添加優化項
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({}),new UglifyJsPlugin()]
  }

語法的轉換 babel

在index.js 里寫點es6語法箭頭函數

let fn = () => {
  console.log("es6 webpack");
};
fn();

終端執行: npx webpack 查看打包文件

--我們發現打包出來的仍然是es6語法這個時候我們需要一個loader 進行轉換 babel-loader babel @babel/core (babel/core是@babel-loader的核心組件轉化模塊@babel/preset-env) 參考鏈接 終端運行:npm i -d babel-loader babel @babel/core @babel/preset-env 在module添加配置

 //在rules下添加配置
 {
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              //轉化es5語法--presets預設
              presets: ["@babel/preset-env"]
            }
          }
        ]
      },

終端運行:npm run build

發現可以已經轉換es6語法 但是僅僅這樣不能轉換es6高階語法比如一些特殊的類函數

class Test {
  // new Test() a =1 實例上添加a屬性 這個語法屬于es7語法打包時發現并不能解析
  a = 1;
}

終端運行:npm run build 發現報錯提示安裝 @babel/plugin-proposal-class-properties

那我們按照要求按照一下插件 npm i -d @babel/plugin-proposal-class-properties 并進行一次配置

 //在rules下添加配置
 {
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              //轉化es5語法--presets預設
              presets: ["@babel/preset-env"],
               plugins: ["@babel/plugin-proposal-class-properties"]
            }
          }
        ]
      },

還有一種寫法 裝飾器@Log打包也是不被解析的 在js 添加

按照錯誤提示安裝decorators-legacy 參考鏈接 安裝官方給出配置添加

 //在rules下添加配置
 {
        test: /.js$/,
        use: {
          {
            loader: "babel-loader",
            options: {
              //轉化es5語法--presets預設
              presets: ["@babel/preset-env"],
               plugins: [ //這里要注意添加順序
                 ["@babel/plugin-proposal-decorators", { legacy: true }],
                ["@babel/plugin-proposal-class-properties", { loose: true }]]
            }
          }
    
      },

轉化完語法接下來看一下babel語法的校驗 @babel/plugin-transform-runtime @babel/runtime參考鏈接

  {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //轉化es5語法--presets預設
            presets: ["@babel/preset-env"],
            plugins: [
              ["@babel/plugin-proposal-decorators", { legacy: true }],
              ["@babel/plugin-proposal-class-properties", { loose: true }],
              [
                "@babel/plugin-transform-runtime",
                {
                  absoluteRuntime: false,
                  corejs: false,
                  helpers: true,
                  regenerator: true,
                  useESModules: false
                }
              ]
            ]
          }
        },
        include: path.resolve(__dirname, "src"), //只找__dirname - >src
        exclude: /node_modules/ //忽略node_modulse
      },

includes 實例方法不被解析 需要一個補丁模塊@babel/polyfill
npm install --save @babel/polyfill Babel includes a polyfill that includes a custom regenerator runtime and core-js. 使用可以直接在js 里引入即可。
接下來看一下代碼校驗ESLint代碼校驗工具參考鏈接 終端安裝 npm i -d eslint eslint-loader 根據項目需求下載對應的eslintrc.json 下載鏈接

 //代碼校驗eslint
      {
        test: /.js$/,
        use: {
          loader: "eslint-loader",
          options: {
            enforce: "pre" //強制執行順序
          }
        }
      },

DEMO

本文回顧 1、webpack基本功能 build.js 打包的原理及源碼分析 2、webpack基礎配置及常用插件配置安裝 3、loader的使用與配置樣式的處理 4、webpack優化項的簡單使用 5、babel語法轉換與使用 babel語法校驗 . 完成以上我相信大家可以掌握并搭建簡單webpack項目。

第二章我們將講解webpack 其他組件的配置及webpack優化項 webpack圖片處理 多入口應用）