手動 webpack2.x 升級到 webpack4.8.3(當前github最新版本)

手動 webpack2.x 升級到 webpack 4.8.3(當前github最新版本)

一直使用的 webpack 是 2.3.3 版本作爲生產環境使用，看了 react-create-app 的 webpack 是 3.8 版本，想着都是折騰，就直接自己手動升級到 4.8.3 吧，然後就動手改了，折騰了一個下午和晚上升級完全成功。

之前面試阿里，那面試官在面完我後，說我沒過，但是他還很耐心的和我交流了半小時來的，教我如何學習折騰一個東西，非常感謝哪位好心人教會我，想要提高就得多折騰。

webpack4 更改的接口是多，但是兼容性挺好，基本上沒啥大的變更，找準升級的部分更改配置就行。

開始吧！

更換的包列表

新增

需要重新安裝
resolve-from：該包需要強制性重裝，作爲依賴包不會更新；
uglifyjs-webpack-plugin： 該插件用來醜化的
extrac-lodaer：對文件進行 hash 處理
babel-preset-env： 新增該包，爲了解析 jsx 的自帶功能

> npm i -D -f babel-preset-env resolve-from@^3.0.0 uglifyjs-webpack-plugin extract-loader

更新的包

> npm i -D -f webpack webpack-cli babel-core babel-loader react-axe@3.0.1 extract-text-webpack-plugin file-loader html-loader html-webpack-plugin 

更新包後出現的問題

react-axe：該包需要指定 3.0.1 才能支持 webpack4.x
resolve-from: 該依賴包需要高於3.x 版本，但是依賴環境不會下載最新的包
html-webpack-plugin:需要強制性的更新到最新版本，否則 解析不了，報錯

webpack4 的配置記錄

需要更改參數位置的 plugins 是 uglifyjs 和 commonChunk

module 的變更

{
    module:{
        rules:[
        // less 和 css 等合併在一塊處理
            { // 自定義 less 主題
                test: /\.(css|less)$/,
                use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        modifyVars: theme  // 處理 antd 主題的配置
                }]
            },
        // 文件處理
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{ // 這裏的options選項參數可以定義多大的圖片轉換爲base64
                        limit:10000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        // outputPath:'images' //定義輸出的圖片文件夾
                    }
                }]
            },
            {
                test:/\.(ttf|eot|svg|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use:[{
                    loader:'url-loader',
                    options:{ // 這裏的options選項參數可以定義多大的圖片轉換爲base64
                        limit:10000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        // outputPath:'images' //定義輸出的圖片文件夾
                    }
                }]
            },
        ]
    }
}

移植的 plugins 配置

{
// 該參數原來是在 plugins 參數的
    optimization:{
        splitChunks:{
            chunks:'all'
        },
        minimizer: [
            new UglifyJsPlugin({
                /* your config */
                uglifyOptions:{
                    compress:true,
                    ecma:6,
                    output:{
                        comments:false,
                    },
                    compress:{
                        dead_code:true,
                        drop_console:true,
                    }
                },
                sourceMap:false,
            })
        ]
    },
}

html-webpack-plugin 升級

參考文章：html-webpack-plugin 升級到 webpack4 的配置

A tale of Webpack 4 and how to finally configure it in the right way

總結

先使用原來的配置，不更改，使用最新版本的 webpack 來運行，看到錯誤時候有3個解決途徑；

1. github/issue

2. 官方文檔 :

官網得好好利用，原來不知道配置選項參數(加載器、插件)需要自己在指南詳細內容裏找鏈接 才能跳到相應接口

3. google

這3個方式，在看到錯誤，去查找錯誤信息的時機非常重要，搜索錯誤信息位置(搜索引擎)和方式(關鍵詞)對的話，基本上錯誤都是一下命中查到相關的信息了

羅列參考文章：

基本上 webpack4 比較全的文章

webpack3 升級到 4 的指導

webpack UglifyJsPlugin 的配置