webpack 3 升級 webpack4 我的筆記

參考文章：

　　1. webpack4升級徹底指南 

　　　　https://segmentfault.com/a/1190000014247030

　　2. Mobx useStrict is not a function

　　　　https://blog.csdn.net/greekmrzzj/article/details/79861787

　　3. babel-preset-env：你須要的惟一Babel插件

　　　　https://segmentfault.com/p/1210000008466178

 

升級步驟：

1.   npm 升級 查看package.json全部包的最新包版本

 

 　　　　

npm install -g npm-check-updates

　　　　ncu -u

　package.json文件包的版本會自動升級到最新版本

2.  參考 文章1  修改webpack.config.js

　　2.1 　　package.json 的script 可能須要修改　　

　　　　　  個人script是這樣寫的 經過env參數判斷是開發模式仍是build模式

"scripts": {
        "start": "webpack-dev-server --env=development --progress --colors",
        "build": "webpack --env=production --progress"
    },

　　2.2 webpack.config.js 中 module.exports 增長 mode 

　　　　因爲個人是env參數，因此個人寫法是

let config = {
    mode: ENV,
    entry: {
...



export default config;

 

3  再見commonchunk，你好optimization

　　webpack3的寫法：

   plugins: [// new webpack.optimize.CommonsChunkPlugin({
        //     async: true,
        //     children: true,
        //     minChunks: 3
        // }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor', 'manifest']
        // }),

　　webpack4的寫法

let config = {
    mode: ENV,
...
    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        // minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必須是數組，在production模式下使用到，見步驟4
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: false,
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    chunks: 'initial',
                    priority: -10,
                    reuseExistingChunk: false,
                    test: /node_modules\/(.*)\.js/
                },
                styles: {
                    name: 'styles',
                    test: /\.(less|scss|css)$/,
                    chunks: 'all', // merge all the css chunk to one file
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    },
    ...
};

4  ExtractTextWebpackPlugin調整，建議選用新的CSS文件提取插件mini-css-extract-plugin

　　production模式，增長  minimizer  

　　綠色註釋掉的是原寫法 紅色是新寫法

// import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import UglifyJsPlugin from "uglifyjs-webpack-plugin";
import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin";


let config = {
   ...
    plugins: [
       ...// new ExtractTextWebpackPlugin({
        //     filename: '[name].[contenthash:8].css',
        //     allChunks: true
        // }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        ...
    ],

    module: {
        rules: [
            {
                test: /\.less$/,
                use: [ MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            strictMath: true
                        }
                    }
                ]
                // loader: ExtractTextWebpackPlugin.extract({
                //     use: [
                //         {
                //             loader: 'css-loader'
                //         },
                //         {
                //             loader: 'less-loader',
                //             options: {
                //                 strictMath: true
                //             }
                //         }
                //     ]
                // })
            },
            {
                test: /\.css$/,
                use: [ MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
                    'css-loader'
                ]
                // loader: ExtractTextWebpackPlugin.extract({
                //     use: ['css-loader']
                // })
            },
　　　　　　　...

        ]
    },
　　...

};

switch (ENV) {
    case 'production':
        config = merge(config, {
            optimization: { minimizer: [ new UglifyJsPlugin({
                        cache: true,
                        parallel: true,
                        sourceMap: true
                    }),
                    new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
 ] },
            plugins: [
                new CleanWebpackPlugin([TARGET])
            ]
        });
        break;
　　　　...
}

export default config;

5  安裝包

　　npm i

　　根據package.json文件安裝相關包 

6 啓動服務

　　npm run start

啓動出現的錯誤

　　env介紹  

　　https://segmentfault.com/p/1210000008466178

　　　　關注一下大佬的 評論區， 我我的仍是不能很好理解這個按需加載

　　https://segmentfault.com/q/1010000013106040

　　　　輔助理解一下吧。。。

justjavac 2017年02月24日 發佈於前端  www.2ality.com

babel-preset-env 是一個新的 preset，能夠根據配置的目標運行環境（environment）自動啓用須要的 babel 插件。

目前咱們寫 javascript 代碼時，須要使用 N 個 preset，好比：babel-preset-es201五、babel-preset-es2016。es2015 能夠把 ES6 代碼編譯爲 ES5，es2016 能夠把 ES2016 代碼編譯爲 ES6。babel-preset-latest 能夠編譯 stage 4 進度的 ECMAScript 代碼。

問題是咱們幾乎每一個項目中都使用了很是多的 preset，包括沒必要要的。例如不少瀏覽器支持 ES6 的 generator，若是咱們使用 babel-preset-es2015 的話，generator 函數就會被編譯成 ES5 代碼。

babel-preset-env 的工做方式相似 babel-preset-latest，惟一不一樣的就是 babel-preset-env 會根據配置的 env 只編譯那些還不支持的特性。

使用這個插件，你講不再須要使用 es20xx presets 了。

配置語法和 Autoprefixer 同樣......

.babelrc 

//  "presets": ["react", "es2015", "stage-0"],
  
"presets": ["react", "env", "stage-0"],

 安裝 babel-preset-env 包

 

"babel-preset-env": "^1.7.0",

"babel-preset-es2015": "6.24.1", //這個應該不須要了

 

 

 升級了mobx 3.3.1 爲 5.5.1  報 mobx.useStrict(true); 錯誤 糾正

　　網上搜索的方案是  enforceActions: true

　　運行提示是： 

 　　Deprecated: Deprecated value for 'enforceActions', use 'false' => '"never"', 'true' => '"observed"', '"strict"' => "'always'" instead

　　因此修改以下

// mobx.useStrict(true);
mobx.configure({
    enforceActions: 'always',
});