摘要：進(jìn)擊基礎(chǔ)篇一進(jìn)擊基礎(chǔ)篇二配置一進(jìn)擊基礎(chǔ)篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊，它本身不依賴于其他模塊，比如，，不去編譯這些庫(kù)，會(huì)使得打包更加快速是個(gè)正則或者包含正則的數(shù)組不去解析忽略

進(jìn)擊webpack 4 （基礎(chǔ)篇一）
進(jìn)擊webpack4 （基礎(chǔ)篇二：配置 一）
進(jìn)擊webpack4 （基礎(chǔ)篇三：配置 二）

noParse

有一些第三方模塊，它本身不依賴于其他模塊，比如jquery，lodash，不去編譯這些庫(kù)，會(huì)使得webpack打包更加快速
noParse是個(gè)正則或者包含正則的數(shù)組 RegExp | [RegExp]

module:{
        noParse:/jquery/, //不去解析jquery
        rules:[
            //...
        ]
    },
--------------------- 

ignorePlugin

以moment這個(gè)時(shí)間庫(kù)為例， 導(dǎo)入moment的同時(shí)， moment會(huì)引入自身依賴的語言包，這些語言包其中有部分是我們不需要用到的，moment內(nèi)部代碼

  plugins: [
      new webpack.IgnorePlugin(/^./locale$/, /moment$/)
    ],

2個(gè)參數(shù)代表的意思是：

當(dāng)匹配到moment這個(gè)庫(kù)的時(shí)候 引入moment并且忽略moment里面匹配到locale的庫(kù)

這個(gè)時(shí)候我們?nèi)绻胍约盒枰膌ocale 需在main.js手動(dòng)引入

import "moment/locale/zh-cn"

另起一個(gè)webpack.config.dll.js 專門用來生成動(dòng)態(tài)鏈接庫(kù)

//webpack.config.dll.js

const path=require("path");
const webpack=require("webpack");
module.exports={
    mode:"development",
    entry: {
        react:["react","react-dom"],
        jquery:["jquery"]
    },// 把 React 相關(guān)模塊的放到一個(gè)多帶帶的動(dòng)態(tài)鏈接庫(kù)
    output: {
        path: path.resolve(__dirname,"dist"),// 輸出的文件都放到 dist 目錄下
        filename: "[name].dll.js",//輸出的動(dòng)態(tài)鏈接庫(kù)的文件名稱，[name] 代表當(dāng)前動(dòng)態(tài)鏈接庫(kù)的名稱
        library: "_dll_[name]",//存放動(dòng)態(tài)鏈接庫(kù)的全局變量名稱,例如對(duì)應(yīng) react 來說就是 _dll_react
    },
    plugins: [
        new webpack.DllPlugin({
            // 動(dòng)態(tài)鏈接庫(kù)的全局變量名稱，需要和 output.library 中保持一致
            // 該字段的值也就是輸出的 mainfest.json 文件 中 name 字段的值
            // 例如 react.manifest.json 中就有 "name": "_dll_react"
            name: "_dll_[name]",
            // 描述動(dòng)態(tài)鏈接庫(kù)的 manifest.json 文件輸出時(shí)的文件名稱
            path: path.join(__dirname, "dist", "[name].mainfest.json")
        })
    ]
}

//打包
npx webpack --config webpack.config.dll.js 

這樣會(huì)在dist生成

然后在webpack.config.js里

const webpack= require("webpack")
plugins: [
  new webpack.DllReferencePlugin({
    manifest:require("./dist/react.mainfest.json")
  }),
  new webpack.DllReferencePlugin({
    manifest:require("./dist/jquery.mainfest.json")
  })
]

這里它會(huì)從mainfest.json尋找name 然后根據(jù)它的標(biāo)識(shí)找到相應(yīng)內(nèi)容, dll.js就是打包出來后的動(dòng)態(tài)鏈接庫(kù)

然后在html模板文件里引入

如果你在main.jsimport React from "react",他會(huì)首先找動(dòng)態(tài)鏈接庫(kù)， 找不到才會(huì)執(zhí)行打包

注：使用react需要配置好rule

{
test:/.js/,
    use:{
        loader:"babel-loader",
        options:{
            presets:[
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
},

npm i happypack -D

如果一個(gè)項(xiàng)目代碼密集，讀寫操作頻繁，happypack 就能讓W(xué)ebpack把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

const HappyPack = require("happypack");
    rules: [
    {
        test: /.js$/,
        // 把對(duì) .js 文件的處理轉(zhuǎn)交給 id 為 babel 的 HappyPack 實(shí)例
        use: ["happypack/loader?id=babel"],
        exclude: path.resolve(__dirname, "node_modules"),
    },
    {
        test: /.css$/,
        // 把對(duì) .css 文件的處理轉(zhuǎn)交給 id 為 css 的 HappyPack 實(shí)例
        use: ["happypack/loader?id=css"]
    }
]
new Happypack({
            //ID是標(biāo)識(shí)符的意思，ID用來代理當(dāng)前的happypack是用來處理一類特定的文件的
            id: "js",
            use: [{
                loader: "babel-loader",
                //options=query都是向插件傳遞參數(shù)的
                options: {
                    presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                    ]
                }
            }]
        }),
        new Happypack({
            //ID是標(biāo)識(shí)符的意思，ID用來代理當(dāng)前的happypack是用來處理一類特定的文件的
            id: "css",
            use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
            threads: 4,//你要開啟多少個(gè)子進(jìn)程去處理這一類型的文件
            verbose: true//是否要輸出詳細(xì)的日志 verbose
        })

注意：開啟進(jìn)程也需要時(shí)間， 如果一個(gè)項(xiàng)目并不是很復(fù)雜， 斟酌使用

module.exports = {
  //...
  externals: {
    jquery: "jQuery"
  }
};

main.js 引入jquery 將不會(huì)打包 import jquery from "jQuery"

html模板內(nèi)引入jquery的cdn地址即可

webpack的tree-shaking自己可以分析出哪些沒有使用到的代碼可以剔除，前提是es6模塊語法
scope-hosting可以提升作用域 比如 var a = 1; var b = a ; console.log(b) 會(huì)編譯成var b = 1; console.log(b)

做這種操作首先得是多頁(yè)面

 entry:{
    home:["./src/index.js"],
    login:["./src/login.js"]
}, // 入口文件

//home.js
import React from "react"
import {render }from "react-dom"
render(
動(dòng)態(tài)鏈接庫(kù)
,window.root)

//login.js
import React from "react"
import {render }from "react-dom"
render(
動(dòng)態(tài)鏈接庫(kù)
,window.root)

//webpack.config.js

optimization:{  // 優(yōu)化
    splitChunks:{ //分割代碼
        cacheGroups:{ // 緩存組
            common:{ // 公共的代碼  一般是自己寫的公共代碼
                chunks:"initial",
                minSize:0,   
                minChunks: 2, //最少被引用2次的模塊
                name: "common"
            },
            vendor:{  // 一般是第三方公共模塊
                priority:1, // 因?yàn)閳?zhí)行是從上往下， 所以設(shè)置優(yōu)先級(jí)比上面高  不然上面抽離的話第三方模塊也被抽離了   
                test:/node_modules/ , //匹配node_modules下的公共代碼,
                chunks:"initial",
                minSize:0,   
                minChunks: 2, //最少被引用2次的模塊
                name: "vendor"
            }    
        }
    }
}

這里拿vue舉例

const Login = () => import(/* webpackChunkName: "login" */,"./login");
new VueRouter({
  routes: [{ path: "/login", component: Login }]
})

webpackChunkName雖然是注釋， 但是webpack能識(shí)別， 編譯后這個(gè)組件生產(chǎn)的名字就是login

可能會(huì)需要@babel/plugin-syntax-dynamic-import 才能識(shí)別

yarn add @babel/plugin-syntax-dynamic-import -D

具體配置看此文

devServer:{
  // 告訴 DevServer 要開啟模塊熱替換模式
  hot: true,      
}  

在vue中只要這樣配置就可以了， vue自己幫我們做了配置

其他庫(kù)中：

import React from "react"
import {render} from "react-dom"




render(, document.getElementById("root"));

if (module.hot) {
  // accept 函數(shù)的第一個(gè)參數(shù)指出當(dāng)前文件接受哪些子模塊的替換，這里表示只接受 ./AppComponent 這個(gè)子模塊
  // 第2個(gè)參數(shù)用于在新的子模塊加載完畢后需要執(zhí)行的邏輯
  module.hot.accept(["./App"], () => {
    // 新的 AppComponent 加載成功后重新執(zhí)行下組建渲染邏輯
    let App=require("./App").default;  
    render(, document.getElementById("root"));
  });
}