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! [email protected] 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 [email protected] 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! [email protected] 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 [email protected] 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"
}
}
}
}