webpack@4.x的變化

先來(lái)說(shuō)下webpack4和之前版本里一些主要的變化：

1、webpack不再支持node v4，這是因?yàn)樾碌膚ebpack和附屬插件使用了es6的語(yǔ)法，v4版本對(duì)es6不是很到位，所以，就不伺候了。

2、開(kāi)始采取約定優(yōu)于配置的思路，webpack@4.x里把很多選項(xiàng)都設(shè)置了默認(rèn)值，比如入口就是./src，輸出目錄就是./dist，當(dāng)然如果你自己去設(shè)置，它也不會(huì)攔著。所以在用webpack@4.x的時(shí)候，我們甚至都可以沒(méi)有webpack.config.js這個(gè)配置文件也能一樣打包。

3、拆分了舊版本里的webpack，分成了用來(lái)處理邏輯的webpack和提供可執(zhí)行命令的webpack-cli，這也是有的同學(xué)把webpack裝成新版本以后會(huì)報(bào)找不到webpack-cli模塊這個(gè)錯(cuò)誤的原因。

4、添加了mode選項(xiàng)，用來(lái)區(qū)分編譯的環(huán)境，提供了development、production和none三個(gè)選項(xiàng)，理論上這個(gè)選項(xiàng)是強(qiáng)制指定的，其實(shí)不指定的話(huà)它也是有默認(rèn)值的，但會(huì)給出一個(gè)warning，官方這么強(qiáng)烈建議了，就顯式的指定一下吧。指定方式有兩種，一是在啟動(dòng)命令里：

./node_modules/.bin/webpack --mode production

另外一種就是在配置文件里指定，方式如下：

var config = {
  mode: 'production' // 可選development、production和none
}

5、配置上的變動(dòng)，類(lèi)似刪除了commonChunksPlugin，用optimization來(lái)代替這種。還有l(wèi)oader的用法也和1.15.0不一樣了，但這個(gè)升級(jí)是在之前版本里就有的，不是webpack@4.x帶來(lái)的。

6、性能優(yōu)化，提高了打包性能。另外從webpack2起，引入了Tree-shaking機(jī)制來(lái)提出沒(méi)有被引用的模塊。它的原理是按著引用關(guān)系重新建立一個(gè)新的依賴(lài)樹(shù)，而沒(méi)有被引用的模塊就不會(huì)被打包到最后的代碼里。之前的壓縮優(yōu)化方式是先把所有模塊都掛到樹(shù)上，然后通過(guò)分析后，刪掉沒(méi)被引用的模塊。從字面意思來(lái)看，我覺(jué)得原來(lái)的方式更像在搖樹(shù)，把沒(méi)用的搖下來(lái)。這兩種方式最后壓縮完的結(jié)果可能類(lèi)似，但設(shè)計(jì)思路完全是從兩個(gè)方向走的。

7、其他。以上這些就是一些比較主要的變化，更詳細(xì)的升級(jí)文檔可以參考下官方的說(shuō)明：https://github.com/webpack/webpack/releases

前言

升級(jí)webpack4，一定要去看文檔，特別是 更新說(shuō)明 ，不要自持用過(guò)原本webpack就自己開(kāi)始折騰。折騰到后面，可能就默默流下眼淚了。

webpack4的變化

webpack-cli抽離

webpack-cli被單獨(dú)拆了出來(lái)，使用的時(shí)候如果只是全局裝了CLI，直接執(zhí)行的時(shí)候是可以的。

webpack --config ./config/webpack.dev.js

如果是寫(xiě)在npm hook里面會(huì)發(fā)現(xiàn)有點(diǎn)問(wèn)題：

//package.json
"scripts": {
  "dev": "webpack --config ./config/webpack.dev.js"
 }
//shall
npm run dev

此時(shí)就會(huì)給提示：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

如果是我沒(méi)有全局裝，我肯定會(huì)意識(shí)到要選一個(gè)，這個(gè)坑關(guān)鍵是我全局裝了。所以就在那折騰半天。

其實(shí)官方文檔開(kāi)頭就說(shuō)明了。

npm install webpack webpack-cli --save-dev

安裝完成之后，繼續(xù)執(zhí)行發(fā)現(xiàn)有warning：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode規(guī)則

配置規(guī)則：必須在production 和 development之間選擇一種,以便webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化

1. production支持所有類(lèi)型的優(yōu)化已生成最優(yōu)bundles
2. development允許注釋、提示和eval devtool devtool的差別可以參考這里
3. production不支持watching、development針對(duì)快速增量重建進(jìn)行了優(yōu)化
4. production支持 module concatenating（Scope Hoisting）即作用域提升，可以將模塊打包在一個(gè)函數(shù)里，這樣減少了函數(shù)聲明，文件體積也會(huì)減小。 詳細(xì)參考看這里
5. process.env.NODE_ENV被設(shè)置用來(lái)區(qū)分環(huán)境（僅僅在構(gòu)建代碼而非config里面)
6. 有一個(gè)hidden none mode的模式可以禁用所有內(nèi)容

用法：

1、配置文件中：

module.exports = {
entry: Entrys,
mode: 'development'
}

2、cli 參數(shù)傳入

webpack --mode=development

兩種方式都是可行的，不過(guò)我遇到過(guò)一個(gè)很坑的問(wèn)題，困擾自己好幾天，最后知道真相的自己眼淚掉下來(lái)后面再提這個(gè)問(wèn)題。

零配置快速開(kāi)始

因?yàn)橐恢北煌虏叟渲锰?，加上parcel給的壓力，webpack4也支持零配置打包了。

如果沒(méi)有配置文件，會(huì)默認(rèn)以./src/index.js作為entry開(kāi)始打包。

如果配置了webpack.config.js或者指定了--config 的文件路徑，則依據(jù)對(duì)應(yīng)配置文件開(kāi)始。

問(wèn)題表現(xiàn)

在webpack.config.js中配置了entry、mode等相關(guān)屬性，配置文件如下：

module.export = {
  mode:'production',
  entry:{
    app:'./src/test.js',
    index:'./src/test.js'
  },
  output: {
    path: process.cwd() + '/dist',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  },
  cache: true,
  devtool: 'cheap-source-map',
  externals: {
    jquery: 'jQuery'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: [
          path.resolve(__dirname, "../src")
        ],
        exclude: [
          'node_modules',
          path.resolve(__dirname, "../node_modules")
        ],
        use: [
          {
            loader: 'babel-loader',
            options:{
              presets:['es2015']
            } 
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules'
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
  },
  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.resolve(__dirname, "../dist"),
    hot: true,
    open:true
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title:'test'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

package.json命令配置:

"scripts": {
  "build": "webpack --config webpack.prod.js"
 }
//執(zhí)行打包
npm run build

發(fā)現(xiàn)始終會(huì)有上面選擇mode類(lèi)型的提示，這讓人不能接受，另外提示沒(méi)有./src/index.js文件，但是我的配置入口是別的文件，這樣讓人很莫名

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/****'

本著跟著提示解決問(wèn)題的原則，少文件那就建一個(gè)唄(后來(lái)發(fā)現(xiàn)這種思維有時(shí)候有用，有時(shí)候還真要慎重)，問(wèn)題表現(xiàn)雖然一致，實(shí)質(zhì)可能有所不同。

新建之后是可以運(yùn)行了但是我們的配置文件好像沒(méi)起作用，

dist下的打包文件是默認(rèn)的main.js

而非我們指定的app和index

為了確保進(jìn)入配置文件，我打了幾個(gè)log，竟然都有輸出，說(shuō)明進(jìn)去了，這問(wèn)題就詭異了。

console.log(path.resolve(__dirname, './src')) //輸出正確路徑
module.export = {
    //*****//
  }

版本統(tǒng)一

初步猜想是版本問(wèn)題，確實(shí)也有issue上提到過(guò)某些版本存在問(wèn)題，對(duì)照著官方demo鎖定版本之后問(wèn)題依然存在。

猜測(cè)：應(yīng)該是配置文件存在錯(cuò)誤

配置檢查

將官方最基本的配置拉進(jìn)來(lái)拷貝進(jìn)來(lái)試了一下，依然存在問(wèn)題沒(méi)能解決。

猜測(cè)：本地的環(huán)境存在問(wèn)題，npm，node等版本

查看之后發(fā)現(xiàn)版本都是滿(mǎn)足的。

運(yùn)行demo

將demo拉到本地并啟動(dòng)，demo正常打包，說(shuō)明本地環(huán)境是ok的。那么問(wèn)題就明顯了，我的配置文件或者項(xiàng)目搭建有問(wèn)題，對(duì)照著demo的配置項(xiàng)，配置項(xiàng)沒(méi)有明顯問(wèn)題，這樣的話(huà)將，配置信息放入到demo中去，修改之后發(fā)現(xiàn)起作用，我又重新審視了下我的配置文件，不僅僅局限于配置部分的時(shí)候，發(fā)現(xiàn)

//我的寫(xiě)法，這樣webpack拿到的就是undefined了。
module.export
//別人的demo
module.exports

webpack的兼容處理

webpack會(huì)將 webpack --config 傳入的文件與本身默認(rèn)配置進(jìn)行merge，保證本身打包不出錯(cuò)。為了證明我們的推論，將配置文件只剩下output屬性，并加上src/index.js

module.exports = {
  output: {
    path: process.cwd() + '/dist1',
    // 直接的入口模zzz塊名
    filename: '[name].js',
    // 非入口模塊，也就是不需要打包到一起的，但又可能會(huì)用到，
    // 這不就是按需加載的么
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  }
}

執(zhí)行之后會(huì)發(fā)現(xiàn)打包到/dist1下面。所以上面寫(xiě)錯(cuò)module.exports的時(shí)候，走的完全是默認(rèn)配置。前面的log打在了module.exports之前執(zhí)行是正確的。

結(jié)尾

當(dāng)遇到不可思議的問(wèn)題的時(shí)候，建議靜下心看一看，不要盲目搜索，另外最可靠的參考就是官方文檔和實(shí)例，注意對(duì)比版本和環(huán)境，如果都沒(méi)問(wèn)題，那么再去嘗試網(wǎng)上的各種解決方法。

這里總結(jié)一下給自己一個(gè)記錄，希望解決思路能幫助其他人。也希望大家多多支持腳本之家。

最新評(píng)論