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-es2015、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',
});