一次webapck4 配置文件無效的解決歷程

前言

升級webpack4，必定要去看文檔，特別是更新說明，不要自持用過本來webpack就本身開始折騰。折騰到後面，可能就默默流下眼淚了。

webpack4的變化

webpack-cli抽離

webpack-cli被單獨拆了出來，使用的時候若是隻是全局裝了CLI，直接執行的時候是能夠的。

webpack --config ./config/webpack.dev.js
複製代碼

若是是寫在npm hook裏面會發現有點問題：

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

此時就會給提示：

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):
複製代碼

若是是我沒有全局裝，我確定會意識到要選一個，這個坑關鍵是我全局裝了。因此就在那折騰半天。
其實官方文檔開頭就說明了。

npm install webpack webpack-cli --save-dev
複製代碼

安裝完成以後，繼續執行發現有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規則

配置規則：必須在production 和 development之間選擇一種,以便webpack 使用相應模式的內置優化

1. production支持全部類型的優化已生成最優bundles
2. development容許註釋、提示和eval devtooldevtool的差異能夠參考這裏
3. production不支持watching、development針對快速增量重建進行了優化
4. production支持 module concatenating（Scope Hoisting）即做用域提高，能夠將模塊打包在一個函數裏，這樣減小了函數聲明，文件體積也會減少。詳細參考看這裏
5. process.env.NODE_ENV被設置用來區分環境（僅僅在構建代碼而非config裏面)
6. 有一個hidden none mode的模式能夠禁用全部內容

用法：

1. 配置文件中：

   module.exports = {
   entry: Entrys,
   mode: 'development'
   }
   複製代碼

2. cli 參數傳入

   webpack --mode=development 
   複製代碼

兩種方式都是可行的，不過我遇到過一個很坑的問題，困擾本身好幾天，最後知道真相的本身眼淚掉下來後面再提這個問題。

零配置快速開始

由於一直被吐槽配置太累，加上parcel給的壓力，webpack4也支持零配置打包了。 若是沒有配置文件，會默認以./src/index.js做爲entry開始打包。 若是配置了webpack.config.js或者指定了--config 的文件路徑，則依據對應配置文件開始。

問題表現

在webpack.config.js中配置了entry、mode等相關屬性，配置文件以下：

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"
  }
//執行打包
npm run build  
複製代碼

發現始終會有上面選擇mode類型的提示，這讓人不能接受，另外提示沒有./src/index.js文件，可是個人配置入口是別的文件，這樣讓人很莫名

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

本着跟着提示解決問題的原則，少文件那就建一個唄(後來發現這種思惟有時候有用，有時候還真要慎重)，問題表現雖然一致，實質可能有所不一樣。 新建以後是能夠運行了可是咱們的配置文件好像沒起做用， dist下的打包文件是默認的main.js 而非咱們指定的app和index 爲了確保進入配置文件，我打了幾個log，居然都有輸出，說明進去了，這問題就詭異了。

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

版本統一

初步猜測是版本問題，確實也有issue上提到過某些版本存在問題，對照着官方demo鎖定版本以後問題依然存在。 猜想：應該是配置文件存在錯誤

配置檢查

將官方最基本的配置拉進來拷貝進來試了一下，依然存在問題沒能解決。 猜想：本地的環境存在問題，npm，node等版本 查看以後發現版本都是知足的。

運行demo

將demo拉到本地並啓動，demo正常打包，說明本地環境是ok的。那麼問題就明顯了，個人配置文件或者項目搭建有問題，對照着demo的配置項，配置項沒有明顯問題，這樣的話將，配置信息放入到demo中去，修改以後發現起做用，我又從新審視了下個人配置文件，不只僅侷限於配置部分的時候，發現

//個人寫法，這樣webpack拿到的就是undefined了。
module.export
//別人的demo
module.exports
複製代碼

webpack的兼容處理

webpack會將 webpack --config 傳入的文件與自己默認配置進行merge，保證自己打包不出錯。爲了證實咱們的推論，將配置文件只剩下output屬性，並加上src/index.js

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

執行以後會發現打包到/dist1下面。因此上面寫錯module.exports的時候，走的徹底是默認配置。前面的log打在了module.exports以前執行是正確的。

結尾

當遇到難以想象的問題的時候，建議靜下心看一看，不要盲目搜索，另外最可靠的參考就是官方文檔和實例，注意對比版本和環境，若是都沒問題，那麼再去嘗試網上的各類解決方法。 這裏總結一下給本身一個記錄，但願解決思路能幫助其餘人。