摘要：特性比較熱門的兩大特性，零配置和速度快號(hào)稱提速上限一般情況下，相比于低版本，場(chǎng)景下第三方依賴打包速度和場(chǎng)景下本地服務(wù)首次啟動(dòng)速度都得到顯著提升零配置通過(guò)指定當(dāng)前場(chǎng)景為開發(fā)模式還是生產(chǎn)模式，自動(dòng)設(shè)置好當(dāng)前場(chǎng)景的默認(rèn)配置，用戶即可馬上使用，不需

webpack4比較熱門的兩大特性，零配置和速度快（號(hào)稱提速上限98%）

一般情況下，webpack4相比于低版本，production場(chǎng)景下第三方依賴打包速度 和 development場(chǎng)景下本地服務(wù)首次啟動(dòng)速度 都得到顯著提升

零配置
通過(guò)mode指定當(dāng)前場(chǎng)景為開發(fā)模式還是生產(chǎn)模式，自動(dòng)設(shè)置好當(dāng)前場(chǎng)景的默認(rèn)配置，用戶即可馬上使用，不需要多余的配置

打包速度快
打包速度之所以能得到顯著提升，多虧了Optimization這個(gè)新增的選項(xiàng)，下文會(huì)說(shuō)到

1.入口（entry）

是應(yīng)用程序，或者說(shuō)一個(gè)頁(yè)面的起點(diǎn)入口，如果傳遞一個(gè)數(shù)組，那么數(shù)組的每一項(xiàng)都會(huì)執(zhí)行
每個(gè)html頁(yè)面都有一個(gè)入口起點(diǎn)
單頁(yè)面應(yīng)用（SPA）：一個(gè)入口
多頁(yè)面應(yīng)用（MPA ：多個(gè)入口

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

如果entry的值是一個(gè)字符串，那么打包之后的chunk名即為默認(rèn)的main
如果entry的值是一個(gè)對(duì)象，則每個(gè)key都會(huì)是chunk的名字，每個(gè)key對(duì)應(yīng)的值都是入口起點(diǎn)

2.輸出（output）

output的值必須為一個(gè)對(duì)象，至少包含下面兩個(gè)屬性

filename: webpack打包之后輸出文件的路徑
path: 決定了每個(gè)輸出的bundle的名稱(即打包后的文件名字)，這些bundle將寫入到output.path指定的目錄下

例如：
單入口

output: {
    path: "/dist",
    filename: "bundle.js"
}

這個(gè)配置將會(huì)在根目錄的dist文件夾下輸出打包后的bundle.js，這是單頁(yè)面應(yīng)用的配置

多入口

output: {
    path: "/dist",
    filename: "js/[name].js"
}

即在dist目錄下的js文件夾中輸出一系列的bundle

一個(gè)比較難理解的配置：ouput.publicPath

配置html中引用的靜態(tài)資源的目錄，在多數(shù)情況下，此選項(xiàng)的值為"/"

publicPath并不會(huì)對(duì)webpack打包文件后存放的目錄有所影響，是對(duì)生成的html中應(yīng)用的靜態(tài)資源，比如圖片，css和js文件的引用路徑做對(duì)應(yīng)的補(bǔ)足

對(duì)于按需加載或者加載外部資源來(lái)說(shuō)，這個(gè)選項(xiàng)的值尤為重要，如果設(shè)置錯(cuò)誤，加載資源的時(shí)候會(huì)返回404

3.模塊加載器（loader）

loaders可以說(shuō)是各種模塊的轉(zhuǎn)換器，可以用來(lái)預(yù)處理文件，解析和打包除javascript之外的任何靜態(tài)資源

loader要下載才能配置使用，比如:
npm install --save-dev css-loader
npm install --save-dev ts-loader

然后在webpack的配置文件中，聲明，css后綴的文件使用css-loader解析，ts后綴的文件使用ts-loader解析

module.exports = {
  module: {
    rules: [
      { test: /.css$/, use: "css-loader" },
      { test: /.ts$/, use: "ts-loader" }
    ]
  }
};

更多l(xiāng)oader的配置：webpack loaders

4.插件（plugins）

plugins用于自定義webpack的構(gòu)建過(guò)程, 比如自定義打包之后的html模板，自定義js和樣式文件是否打包等等
plugins的值，是一個(gè)個(gè)new出來(lái)的插件實(shí)例

webpack4取消了四個(gè)常用的用于性能優(yōu)化的pluginUglifyjsWebpackPlugin，CommonsChunkPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin
轉(zhuǎn)而提供了一個(gè)名為optimization的配置項(xiàng)，用于替代以上四個(gè)插件（并不是說(shuō)以上插件不能使用了，只是webpack4本身有替代的方案，可以不用插件）

html-webpack-plugin
通過(guò)new 該插件的實(shí)例，可以讓webpack幫我們編譯出一個(gè)html文件
需要注意的是，多頁(yè)面的配置下，有多少個(gè)頁(yè)面，就要new多少個(gè)實(shí)例，傳入到plugins中，后面有代碼示例。

html-webpack-inline-source-plugin
這個(gè)插件用于生產(chǎn)模式下，讓webpack在打包的時(shí)候，將js和css直接插入到html中，從而減少請(qǐng)求的消耗
要注意的是，并不是所有情況下都適合用，文件較大時(shí)，還是推薦通過(guò)標(biāo)簽去引入資源（運(yùn)行時(shí)文件一般比較小，下面會(huì)通過(guò)另一個(gè)插件將runtime的代碼直接插入html中）

更多插件及其配置：webpack plugins

5.模式（mode）

mode是webpack4新增的參數(shù)選項(xiàng)，它有三個(gè)值，development、production、none,
由于開發(fā)模式和生產(chǎn)模式所需要的webpack的配置稍微有單不同（但是大部分是相同的）
所以可以建立兩個(gè)webpack的配置文件，分別用于開發(fā)模式和生產(chǎn)模式，除此之外，指明當(dāng)前處于哪個(gè)模式下，有利于webpack內(nèi)部做優(yōu)化
比如，有一些插件是在生產(chǎn)模式下才啟用的。

通過(guò)指定mode的值為development和production中的一個(gè)，來(lái)表示webpack處于何種模式下，默認(rèn)值是production

mode為 development 時(shí)，注重提升代碼的構(gòu)建速度和開發(fā)體驗(yàn)

module.exports = {
  mode: "development",
  cache: true,
  devtools: "eval",
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
  ]
};

mode為 production 時(shí)，提供代碼優(yōu)化，如壓縮、作用域提升等

module.exports = {
  mode: "production",
  plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("production")
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}
 

也可以通過(guò)命令行運(yùn)行下面的命令來(lái)指定模式
webpack --mode=production

6.優(yōu)化（optimization）

這個(gè)選項(xiàng)也是wepack4新增的，主要用來(lái)自定義一些優(yōu)化打包的策略

minimizer
在production模式下，該配置會(huì)默認(rèn)為我們壓縮混淆代碼，但配置項(xiàng)過(guò)于少導(dǎo)致無(wú)法滿足我們對(duì)于優(yōu)化代碼的訴求，下面是一套比較靈活的優(yōu)化配置

var UglifyJsPlugin = require("uglifyjs-webpack-plugin")
var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
  optimization: {
    minimizer: [
      // 自定義js優(yōu)化配置，將會(huì)覆蓋默認(rèn)配置
      new UglifyJsPlugin({
        exclude: /.min.js$/, // 過(guò)濾掉以".min.js"結(jié)尾的文件，我們認(rèn)為這個(gè)后綴本身就是已經(jīng)壓縮好的代碼，沒(méi)必要進(jìn)行二次壓縮
        cache: true,
        parallel: true, // 開啟并行壓縮，充分利用cpu
        sourceMap: false,
        extractComments: false, // 移除注釋
        uglifyOptions: {
          compress: {
            unused: true,
            warnings: false,
            drop_debugger: true
          },
          output: {
            comments: false
          }
        }
      }),
      // 用于優(yōu)化css文件
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /.css$/g,
        cssProcessorOptions: {
          safe: true,
          autoprefixer: { disable: true }, //這里注意下!!!!!
          mergeLonghand: false,
          discardComments: {
            removeAll: true // 移除注釋
          }
        },
        canPrint: true
      })
    ]
  }
}

UglifyJsPlugin是大家經(jīng)常使用的插件，這里比較亮的地方是可以過(guò)濾本身已經(jīng)壓縮的js，可以提升打包速度，并且避免二次混淆壓縮造成的未知bug

OptimizeCssAssetsPlugin用來(lái)優(yōu)化css文件的輸出，優(yōu)化策略包括：擯棄重復(fù)的樣式定義、砍掉樣式規(guī)則中多余的參數(shù)、移除不需要的瀏覽器前綴等
這里注意插件的參數(shù)autoprefixer: { disable: true }，一定要指定為true。否則的話該插件會(huì)把我們用autoprefix加好的前綴都移除掉（因?yàn)樵摬寮X(jué)得多余）

runtimeChunk
分離出webpack編譯出來(lái)的運(yùn)行時(shí)代碼，也就是我們之前成為manifest的代碼塊，方便我們做文件的之就好緩存
這個(gè)參數(shù)項(xiàng)（runtimeChunk）有多種類型的值，其中，single即將所有的chunk的運(yùn)行時(shí)代碼打包到一個(gè)文件中，multiple即針對(duì)每個(gè)chunk的運(yùn)行時(shí)代碼分別打包出一個(gè)runtime文件
我們可以配合上面說(shuō)到的 InlineManifestWebpackPlugin插件，將運(yùn)行時(shí)代碼直接插入html文件中，因?yàn)檫@段代碼非常少，這樣做可以避免一次請(qǐng)求的開銷
InlineManifestWebpackPlugin插件的順序一定要在HtmlWebpackPlugin之后，否則會(huì)導(dǎo)致編譯失敗

var HtmlWebpackPlugin = require("html-webpack-plugin")
var InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin")
module.exports = {
  optimization: {
    runtimeChunk: "single"
    // 等價(jià)于
    // runtimeChunk: {
    //   name: "runtime"
    // }
  },
  plugins: [
     new HtmlWebpackPlugin({
       template: "../src/index.html",
       filename: "article.html",
       chunks: ["article", "vendors", "runtime"]
     }),
     new InlineManifestWebpackPlugin(), //放在htmlWebpackPlugin的后面才能生效
  ]
}

splitChunks
這是比較難理解的一個(gè)配置項(xiàng)
webpack4移除了CommonsChunkPlugin插件，取而代之的是splitChunks
比較優(yōu)雅的分離打包配置如下

splitChunks: {
  cacheGroups: {
    vendors: {
      test: /[/]node_modules[/]/,
      name: "vendors",
      minSize: 30000,
      minChunks: 1,
      chunks: "initial",
      priority: 1 // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí)，數(shù)值越大越優(yōu)先處理
    },
    commons: {
      test: /[/]src[/]common[/]/,
      name: "commons",
      minSize: 30000,
      minChunks: 3,
      chunks: "initial",
      priority: -1,
      reuseExistingChunk: true // 這個(gè)配置允許我們使用已經(jīng)存在的代碼塊
    }
  }
}

這段配置，首先是將node_modules中的模塊統(tǒng)一打包成vendors.js
它限制了分離文件的最小體積為30k（壓縮之前的），因?yàn)閣ebpack認(rèn)為，小于30k的代碼分離出來(lái)，還要額外小號(hào)一次請(qǐng)求去加載它，成本太高，這個(gè)值是通過(guò)大量的時(shí)間總結(jié)出來(lái)的
其次，還分離除了共享模塊，比如src目錄下有幾個(gè)全局公用的js文件如utils等，可以多帶帶抽出來(lái)打包成一個(gè)commons.js
由于這部分文件不經(jīng)常改變，有利于持久緩存

完：demo地址