webpack升级

因为react版本是15.6.2版本，所以打包发布之后，react提示版本outdated，所以想要将所有版本都升级到最新，但是相关版本有依赖，升级之后出现各种问题，在此处记录一下。

一、网上查到全部升级命令，下面测试一下命令发现没有什么结果；

npm update -S
npm update -D

二、npm模块升级工具npm-check，升级依赖查看命令，首先需要安装npm-check,全局安装，按照命令行提示输入电脑开机密码授权。

sudo npm install -g npm-check

安装成功后，在项目目录下，命令行npm-check -u会出现更新列表；向下箭头可以移动需要更新的项目，使用空格键选择是否需要更新，选择完成后，敲回车更新；

三、升级完成之后发现新问题：新版本将webpack-cli单独拿出来了，需要 npm webpack-cli

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:529
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    .....

四、安装webpack-cli后，运行npm start命令，发现报错：

up to date in 4.517s
development
/Users/.../node_modules/webpack/node_modules/schema-utils/src/validateOptions.js:31
    throw new ValidationError(ajv.errors, name);
    ^

ValidationError: Dll Reference Plugin Invalid Options

options.manifest.content['./node_modules/core-js/modules/_export.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
.........
optionsnpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! configcenter@0.1.1 dev: `npm install && export NODE_ENV=development && webpack-dev-server --progress --colors -d -w`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the configcenter@0.1.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

命令行说是webpack dllplugin的锅~那么现在去查找dll的配置，看起来版本不同，需要变化。

1.git 上又遇到一样问题的人，webpack --config webpack.config.vendor.js，命令行执行之后，要求安装webpack-cli，执行命令npm install -D 执行；安装完成后运行上面命令依然要求安装，执行命令npm install webpack-cli -g；请记得安装全局需要在前面加上sudo；

2.以上安装完全局webpack、webpack-cli之后，执行命令webpack --config webpack.config.vendor.js，报错项目中不包含webpack.config.vendor.js；所以，依然查找 如何配置该文件；最终发现使用最新版本的webpack 4.xx目前又不能解决的问题，所以webpack版本暂时不要升级到最新；

"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3",

3.血泪史之一，eslint不要升级到最新版本，会出现很多问题，例如window等命令无法找到报错等；

但是安装了低版本的eslint仍然存在新的问题，项目中报错Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.  查找问题，需要安装npm i @babel/preset-react   ；问题回来了，preset-react要求高版本eslint，4.x版本的webpack等；所以，重新升级到最高版本。那么依然绕不开问题；下面继续使用 npm-check -u检查更新，更新到最新；

4.eslint报错信息会有linebreak-style问题，webstorm选中根目录如下图：另外，在preference中，可以选择editor，选择line seperators,选择LINIX and os x(\n)选项；

5.那么现在问题回答搜原点，依然会出现如下报错,分析起来，应该是dll、webpack配置问题；

    throw new ValidationError(ajv.errors, name);
    ^

ValidationError: Dll Reference Plugin Invalid Options

options.manifest.content['./node_modules/core-js/modules/_export.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_an-object.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_global.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_fails.js']['meta'] is an invalid additional property
...
optionsnpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! configcenter@0.1.1 dev: `npm --registry http://npm.envisioncn.com:7001 install && export NODE_ENV=development && webpack-dev-server --progress --colors -d -w`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the configcenter@0.1.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yuxin.zhang/.npm/_logs/2018-11-15T09_45_58_899Z-debug.log

Process finished with exit code 1

于是解决问题步骤：

1）首先查找对应webpack 4配置问题，对照一一排查问题；dll.config已经配置好，那么其中是否某些配置已经变更；命令行执行

 webpack -p --progress --config dll.config.js 

报错：
/Users/.../project/node_modules/webpack-cli/bin/cli.js:244
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

2)排查问题出现js压缩问题:期间会有warning，请少什么装什么；

npm install uglifyjs-webpack-plugin

配置dll改成下面：

output: {
        path: path.resolve("./output/webpack-dll/dev"),
        filename: '[name].js',
        library: ["DLL", "[name]"],
    },

然后重新跑一下 dll命令 webpack -p --progress --config dll.config.js

3）发现需要将 plugin中 HtmlWebpackPlugin、HtmlWebpackPlugin、CommonsChunkPlugin、UglifyJsPlugin、ParallelUglifyPlugin去掉，在plugin平级设置 

plugin:[...],

    //压缩js
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            }),
            new OptimizeCSSPlugin({
                names: ['commons', 'lang'],
                filename: isPublish ? 'res/[name]/index_[chunkhash:8].js' : 'res/[name]/index.js',
                minChunks: Infinity
            })

        ],
        splitChunks: {
            chunks: 'async',
            // 大于30KB才单独分离成chunk
            minSize: 30000,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: true,
            cacheGroups: {
                default: {
                    priority: -20,
                    reuseExistingChunk: true,
                },
                vendors: {
                    name: DLL_NAME,
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: "all"
                }
            }
        }
    }