摘要：馬上要出了，完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性，使得整個系統擴展性很好。

webpack馬上要出5了，完全手寫一個優化后的腳手架是不可或缺的技能。

本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本

本人所有代碼均手寫，親自試驗過可以運行達到優化效果。

歡迎關注我的專欄 《前端進階》 以后都是高贊高質量文章

要轉載必須聯系本人經過同意才可轉載 謝謝！

杜絕5分鐘的技術，我們先深入原理再寫配置，那會簡單很多。

我這套代碼，在開發環境中性能不是完美的，但是構建速度打包生產環境代碼是極快的，請你一定要去看我的git倉庫，現在已經加入了項目實踐，也在里面，可以的話給個star哦

識別JSX文件

tree shaking 搖樹優化 刪除掉無用代碼

識別 async / await 和 箭頭函數

PWA功能，熱刷新，安裝后立即接管瀏覽器 離線后仍讓可以訪問網站 還可以在手機上添加網站到桌面使用

preload 預加載資源 prefetch按需請求資源

CSS模塊化，不怕命名沖突

小圖片的base64處理

文件后綴省掉jsx js json等

實現React懶加載，按需加載 ， 代碼分割 并且支持服務端渲染

支持less sass stylus等預處理

code spliting 優化首屏加載時間 不讓一個文件體積過大

加入dns-prefetch和preload預請求必要的資源，加快首屏渲染。

加入prerender，極大加快首屏渲染速度。

提取公共代碼，打包成一個chunk

每個chunk有對應的chunkhash,每個文件有對應的contenthash,方便瀏覽器區別緩存

圖片壓縮

CSS壓縮

增加CSS前綴 兼容各種瀏覽器

對于各種不同文件打包輸出指定文件夾下

緩存babel的編譯結果，加快編譯速度

每個入口文件，對應一個chunk，打包出來后對應一個文件 也是code spliting

刪除HTML文件的注釋等無用內容

每次編譯刪除舊的打包代碼

將CSS文件多帶帶抽取出來

讓babel不僅緩存編譯結果，還在第一次編譯后開啟多線程編譯，極大加快構建速度

等等....

webpack中文官網的標語是 ：讓一切都變得簡單

入口(entry)

輸出(output)

loader

插件(plugins)

本文旨在給出這些概念的高度概述，同時提供具體概念的詳盡相關用例。

讓我們一起來復習一下最基礎的Webpack知識，如果你是高手，那么請直接忽略這些往下看吧....

入口

入口起點`(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

每個依賴項隨即被處理，最后輸出到稱之為 bundles 的文件中，我們將在下一章節詳細討論這個過程。

可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值為 ./src。

接下來我們看一個 entry 配置的最簡單例子：

webpack.config.js

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

入口可以是一個對象，也可以是一個純數組

entry: {
    app: ["./src/index.js", "./src/index.html"],
    vendor: ["react"] 
},
entry: ["./src/index.js", "./src/index.html"],

有人可能會說，入口怎么放HTML文件，因為開發模式下熱更新如果不設置入口為HTML，那么更改了HTML文件內容，是不會刷新頁面的，需要手動刷新，所以這里給了入口HTML文件，一個細節。

出口(output)

output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程：

    webpack.config.js
    
    const path = require("path");
    
    module.exports = {
      entry: "./path/to/my/entry/file.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "my-first-webpack.bundle.js"
      }
    };

在上面的示例中，我們通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪里。可能你想要了解在代碼最上面導入的 path 模塊是什么，它是一個 Node.js 核心模塊，用于操作文件路徑。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

注意，loader 能夠 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能并不支持。我們認為這種語言擴展是有很必要的，因為這可以使開發人員創建出更準確的依賴關系圖。

在更高層面，在 webpack 的配置中 loader 有兩個目標：

test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。

use 屬性，表示進行轉換時，應該使用哪個 loader。

    webpack.config.js
    
    const path = require("path");
    
    const config = {
      output: {
        filename: "my-first-webpack.bundle.js"
      },
      module: {
        rules: [
          { test: /.txt$/, use: "raw-loader" }
        ]
      }
    };
    
    module.exports = config;

以上配置中，對一個多帶帶的 module 對象定義了 rules 屬性，里面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：

“嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析為 ".txt" 的路徑」時，在你對它打包之前，先使用 raw-loader轉換一下。”

重要的是要記得，在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules。然而，在定義錯誤時 webpack 會給出嚴重的警告。為了使你受益于此，如果沒有按照正確方式去做，webpack 會“給出嚴重的警告”

loader 還有更多我們尚未提到的具體配置屬性。

這里引用這位作者的優質文章內容，手寫一個loader和plugin 手寫一個loader和plugin

webpack打包原理

識別入口文件

通過逐層識別模塊依賴。（Commonjs、amd或者es6的import，webpack都會對其進行分析。來獲取代碼的依賴）

webpack做的就是分析代碼。轉換代碼，編譯代碼，輸出代碼

最終形成打包后的代碼

這些都是webpack的一些基礎知識，對于理解webpack的工作機制很有幫助。

什么是loader？

loader是文件加載器，能夠加載資源文件，并對這些文件進行一些處理，諸如編譯、壓縮等，最終一起打包到指定的文件中

處理一個文件可以使用多個loader，loader的執行順序是和本身的順序是相反的，即最后一個loader最先執行，第一個loader最后執行。

第一個執行的loader接收源文件內容作為參數，其他loader接收前一個執行的loader的返回值作為參數。最后執行的loader會返回此模塊的JavaScript源碼

在使用多個loader處理文件時，如果要修改outputPath輸出目錄，那么請在最上面的loader中options設置

什么是plugin？

在 Webpack 運行的生命周期中會廣播出許多事件，Plugin 可以監聽這些事件，在合適的時機通過 Webpack 提供的 API 改變輸出結果。

plugin和loader的區別是什么？

對于loader，它就是一個轉換器，將A文件進行編譯形成B文件，這里操作的是文件，比如將A.scss或A.less轉變為B.css，單純的文件轉換過程

plugin是一個擴展器，它豐富了wepack本身，針對是loader結束后，webpack打包的整個過程，它并不直接操作文件，而是基于事件機制工作，會監聽webpack打包過程中的某些節點，執行廣泛的任務。

webpack的運行

webpack 啟動后，在讀取配置的過程中會先執行 new MyPlugin(options) 初始化一個 MyPlugin 獲得其實例。在初始化compiler 對象后，再調用 myPlugin.apply(compiler) 給插件實例傳入 compiler 對象。插件實例在獲取到 compiler 對象后，就可以通過 compiler.plugin(事件名稱, 回調函數) 監聽到 Webpack 廣播出來的事件。并且可以通過 compiler 對象去操作 webpack

看到這里可能會問compiler是啥，compilation又是啥？

Compiler 對象包含了 Webpack 環境所有的的配置信息，包含 options，loaders，plugins 這些信息，這個對象在 Webpack 啟動時候被實例化，它是全局唯一的，可以簡單地把它理解為 Webpack 實例；

Compilation 對象包含了當前的模塊資源、編譯生成資源、變化的文件等。當 Webpack 以開發模式運行時，每當檢測到一個文件變化，一次新的 Compilation 將被創建。Compilation 對象也提供了很多事件回調供插件做擴展。通過 Compilation 也能讀取到 Compiler 對象。

Compiler 和 Compilation 的區別在于：

Compiler 代表了整個 Webpack 從啟動到關閉的生命周期，而 Compilation 只是代表了一次新的編譯。

事件流

webpack 通過?Tapable?來組織這條復雜的生產線。

webpack 的事件流機制保證了插件的有序性，使得整個系統擴展性很好。

webpack的事件流機制應用了觀察者模式，和 Node.js 中的 EventEmitter 非常相似。

入口設置 ：

設置APP，幾個入口文件，即會最終分割成幾個chunk

在入口中配置 vendor，可以code spliting ，將這些公共的復用代碼最終抽取成一個chunk，多帶帶打包出來

要想在開發模式中HMTL文件也熱更新，需要加入·index.html為入口文件

    entry: {
            app: ["./src/index.js", "./src/index.html"],
            vendor: ["react"]  //這里還可以加入redux react-redux better-scroll等公共代碼 
        },

output出口

webpack基于Node.js環境運行，可以使用Node.js的API，path模塊的resolve方法

對輸出的JS文件，加入contenthash標示，讓瀏覽器緩存文件，區別版本。

     output: {
            filename: "[name].[contenthash:8].js",
            path: resolve(__dirname, "../dist")
        },

mode: "development" 模式選擇，這里直接設置成開發模式，先從開發模式開始。

resolve解析配置，為了為了給所有文件后綴省掉 js jsx json，加入配置

resolve: {
    extensions: [".js", ".json", ".jsx"]
}

加入插件 熱更新plugin和html-webpack-plugin

   
   const HtmlWebpackPlugin = require("html-webpack-plugin")
   const webpack = require("webpack")
   new HtmlWebpackPlugin({
           template: "./src/index.html"
       }),
   new webpack.HotModuleReplacementPlugin(),

加入代碼分割，開發模式也需要代碼分割，性能優化

optimization: {
        runtimeChunk: true,
        splitChunks: {
            chunks: "all"
        }
    }

加入 babel-loader 還有 解析JSX ES6語法的 babel preset

@babel/preset-react解析 jsx語法

@babel/preset-env解析es6語法

@babel/plugin-syntax-dynamic-import解析react-loadable的import按需加載，附帶code spliting功能

["import", { libraryName: "antd-mobile", style: true }], Antd-mobile的按需加載

{
                            loader: "babel-loader",
                            options: {   //jsx語法
                                presets: ["@babel/preset-react",
                                    //tree shaking 按需加載babel-polifill
                                    ["@babel/preset-env", { "modules": false, "useBuiltIns": "false", "corejs": 2 }]],
                                plugins: [
                                    //支持import 懶加載 
                                    "@babel/plugin-syntax-dynamic-import",
                                    //andt-mobile按需加載  true是less，如果不用less style的值可以寫"css" 
                                    ["import", { libraryName: "antd-mobile", style: true }],
                                    //識別class組件
                                    ["@babel/plugin-proposal-class-properties", { "loose": true }],
                                ],
                                cacheDirectory: true
                            },
                        }

加入thread-loader，在babel首次編譯后開啟多線程

    const os = require("os")
    {
            loader: "thread-loader",
            options: {
                workers: os.cpus().length   
                     }
    }

React的按需加載，附帶代碼分割功能 ，每個按需加載的組件打包后都會被多帶帶分割成一個文件

        import React from "react"
        import loadable from "react-loadable"
        import Loading from "../loading" 
        const LoadableComponent = loadable({
            loader: () => import("../Test/index.jsx"),
            loading: Loading,
        });
        class Assets extends React.Component {
            render() {
                return (
                    

                        
這即將按需加載
                        
                    
                )
            }
        }
        
        export default Assets

加入html-loader識別html文件

    {
    test: /.(html)$/,
    loader: "html-loader"
    }

加入eslint-loader

        {
        enforce:"pre",
        test:/.js$/,
        exclude:/node_modules/,
        include:resolve(__dirname,"/src/js"),
        loader:"eslint-loader"
        }

開發模式結束 代碼在下面的git倉庫里

webpack的熱更新又稱熱替換（Hot Module Replacement），縮寫為HMR。 這個機制可以做到不用刷新瀏覽器而將新變更的模塊替換掉舊的模塊。

首先要知道server端和client端都做了處理工作

第一步，在 webpack 的 watch 模式下，文件系統中某一個文件發生修改，webpack 監聽到文件變化，根據配置文件對模塊重新編譯打包，并將打包后的代碼通過簡單的 JavaScript 對象保存在內存中。

第二步是 webpack-dev-server 和 webpack 之間的接口交互，而在這一步，主要是 dev-server 的中間件 webpack-dev-middleware 和 webpack 之間的交互，webpack-dev-middleware 調用 webpack 暴露的 API對代碼變化進行監控，并且告訴 webpack，將代碼打包到內存中。

第三步是 webpack-dev-server 對文件變化的一個監控，這一步不同于第一步，并不是監控代碼變化重新打包。當我們在配置文件中配置了devServer.watchContentBase 為 true 的時候，Server 會監聽這些配置文件夾中靜態文件的變化，變化后會通知瀏覽器端對應用進行 live reload。注意，這兒是瀏覽器刷新，和 HMR 是兩個概念。

第四步也是 webpack-dev-server 代碼的工作，該步驟主要是通過 sockjs（webpack-dev-server 的依賴）在瀏覽器端和服務端之間建立一個 websocket 長連接，將 webpack 編譯打包的各個階段的狀態信息告知瀏覽器端，同時也包括第三步中 Server 監聽靜態文件變化的信息。瀏覽器端根據這些 socket 消息進行不同的操作。當然服務端傳遞的最主要信息還是新模塊的 hash 值，后面的步驟根據這一 hash 值來進行模塊熱替換。

webpack-dev-server/client 端并不能夠請求更新的代碼，也不會執行熱更模塊操作，而把這些工作又交回給了 webpack，webpack/hot/dev-server 的工作就是根據 webpack-dev-server/client 傳給它的信息以及 dev-server 的配置決定是刷新瀏覽器呢還是進行模塊熱更新。當然如果僅僅是刷新瀏覽器，也就沒有后面那些步驟了。

HotModuleReplacement.runtime 是客戶端 HMR 的中樞，它接收到上一步傳遞給他的新模塊的 hash 值，它通過 JsonpMainTemplate.runtime 向 server 端發送 Ajax 請求，服務端返回一個 json，該 json 包含了所有要更新的模塊的 hash 值，獲取到更新列表后，該模塊再次通過 jsonp 請求，獲取到最新的模塊代碼。這就是上圖中 7、8、9 步驟。

而第 10 步是決定 HMR 成功與否的關鍵步驟，在該步驟中，HotModulePlugin 將會對新舊模塊進行對比，決定是否更新模塊，在決定更新模塊后，檢查模塊之間的依賴關系，更新模塊的同時更新模塊間的依賴引用。

最后一步，當 HMR 失敗后，回退到 live reload 操作，也就是進行瀏覽器刷新來獲取最新打包代碼。

參考文章 webpack面試題-騰訊云

加入 WorkboxPlugin ， PWA的插件

pwa這個技術其實要想真正用好，還是需要下點功夫，它有它的生命周期，以及它在瀏覽器中熱更新帶來的副作用等，需要認真研究。可以參考百度的lavas框架發展歷史~

const WorkboxPlugin = require("workbox-webpack-plugin")


    new WorkboxPlugin.GenerateSW({ 
                clientsClaim: true, //讓瀏覽器立即servece worker被接管
                skipWaiting: true,  // 更新sw文件后，立即插隊到最前面 
                importWorkboxFrom: "local",
                include: [/.js$/, /.css$/, /.html$/,/.jpg/,/.jpeg/,/.svg/,/.webp/,/.png/],
            }),
        

加入每次打包輸出文件清空上次打包文件的插件

    const CleanWebpackPlugin = require("clean-webpack-plugin")
    
    new CleanWebpackPlugin()

加入code spliting代碼分割

    optimization: {
            runtimeChunk:true,  //設置為 true, 一個chunk打包后就是一個文件，一個chunk對應`一些js css 圖片`等
            splitChunks: {
                chunks: "all"  // 默認 entry 的 chunk 不會被拆分, 配置成 all, 就可以了拆分了，一個入口`JS`，
                //打包后就生成一個多帶帶的文件
            }
        }

加入多帶帶抽取CSS文件的loader和插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

    {
        test: /.(less)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader", options: {
                    modules: true,
                    localIdentName: "[local]--[hash:base64:5]"
                }
            },
            {loader:"postcss-loader"},
            { loader: "less-loader" }
        ]
    }
    
     new MiniCssExtractPlugin({
            filename:"[name].[contenthash:8].css"
        }),

加入壓縮css的插件

    const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
    new OptimizeCssAssetsWebpackPlugin({
                cssProcessPluginOptions:{
                    preset:["default",{discardComments: {removeAll:true} }]
                }
            }),

殺掉html一些沒用的代碼

    new HtmlWebpackPlugin({
        template: "./src/index.html",
        minify: {
            removeComments: true,  
            collapseWhitespace: true,  
            removeRedundantAttributes: true,
            useShortDoctype: true, 
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true, 
            minifyJS: true,
            minifyCSS: true, 
            minifyURLs: true, 
         }
}),

加入圖片壓縮

{
                test: /.(jpg|jpeg|bmp|svg|png|webp|gif)$/,
                
                use:[
                    {loader: "url-loader",
                    options: {
                        limit: 8 * 1024,
                        name: "[name].[hash:8].[ext]",
                        outputPath:"/img"
                    }},
                    {
                        loader: "img-loader",
                        options: {
                          plugins: [
                            require("imagemin-gifsicle")({
                              interlaced: false
                            }),
                            require("imagemin-mozjpeg")({
                              progressive: true,
                              arithmetic: false
                            }),
                            require("imagemin-pngquant")({
                              floyd: 0.5,
                              speed: 2
                            }),
                            require("imagemin-svgo")({
                              plugins: [
                                { removeTitle: true },
                                { convertPathData: false }
                              ]
                            })
                          ]
                        }
                      }
                ]
                
                

            }

加入file-loader 把一些文件打包輸出到固定的目錄下

{
                exclude: /.(js|json|less|css|jsx)$/,
                loader: "file-loader",
                options: {
                    outputPath: "media/",
                    name: "[name].[contenthash:8].[ext]"
                }
            }
            

里面有一些注釋可能不詳細，代碼都是自己一點點寫，試過的，肯定沒用任何問題

需要的依賴

{
    "name": "webpack",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "dependencies": {
        "@babel/core": "^7.4.4",
        "@babel/preset-env": "^7.4.4",
        "@babel/preset-react": "^7.0.0",
        "autoprefixer": "^9.5.1",
        "babel-loader": "^8.0.5",
        "clean-webpack-plugin": "^2.0.2",
        "css-loader": "^2.1.1",
        "eslint": "^5.16.0",
        "eslint-loader": "^2.1.2",
        "file-loader": "^3.0.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "imagemin": "^6.1.0",
        "imagemin-gifsicle": "^6.0.1",
        "imagemin-mozjpeg": "^8.0.0",
        "imagemin-pngquant": "^7.0.0",
        "imagemin-svgo": "^7.0.0",
        "img-loader": "^3.0.1",
        "less": "^3.9.0",
        "less-loader": "^5.0.0",
        "mini-css-extract-plugin": "^0.6.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "postcss-loader": "^3.0.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-loadable": "^5.5.0",
        "react-redux": "^7.0.3",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.2",
        "webpack-dev-server": "^3.3.1",
        "workbox-webpack-plugin": "^4.3.1"
    },
    "scripts": {
        "start": "webpack-dev-server --config ./config/webpack.dev.js",
        "dev": "webpack-dev-server --config ./config/webpack.dev.js",
        "build": "webpack  --config  ./config/webpack.prod.js "
    },
    "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.2.0"
    }
}