webpack4.0之升级实战

npm install vue-cli -g

安装vue-cli后，vue命令使用不了
打开环境变量，
在用户变量的path添加安装的路径。
在系统变量添加一个vue，路径是安装的路径。
成功！！！
参考：https://blog.csdn.net/SilenceJude/article/details/85808528

vue init webpack bbb 创建bbb的vue项目

npm install 安装依赖

报错 Unexpected end of JSON input while parsing near ‘…\nL98ocJB4OYdnp4mvrrs’

npm install yarn -g 打算使用yarn试试 成功了

npm run dev

将webpack3升级为webpack4
yarn add webpack@latest -D 升级webpack为最新版本到开发环境

将webpack-dev-server升级一下 这个是用来启动webpack，并且进行热替换

启动后提示安装webpack-cli (webpack4的版本，webpack和webpack-cli分开。webpack-cli用来使用webpack的命令)

yarn add webpack-dev-server@latest -D

yarn add html-webpack-plugin@latest -D --报错了 升级一下

yarn add eslint-loader@latest -D

yarn add vue-loader@latest -D

css报错
yarn add css-loader@latest -D
yarn add postcss-loader@latest -D
yarn add vue-style-loader@latest -D

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.报错
webpack.base.conf.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
plugins: [
new VueLoaderPlugin()
]

yarn run dev 启动成功

页面控制台报错
Cannot assign to read only property ‘exports’ of object ‘#’

yarn add babel-plugin-transform-es2015-modules-commonjs -D 安装
babelrc中配置
{ “plugins”: [“transform-es2015-modules-commonjs”] }
参考：https://www.cnblogs.com/changzz/p/10221855.html

页面显示正常

yarn run build 打包
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.报错
webpack4的splitChunksPlugin将webpack3的CommonsChunkPlugin替换了

参考：https://webpack.js.org/plugins/commons-chunk-plugin/
The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the SplitChunksPlugin.

注释webpack.prod.conf.js的commonschunkplugin的内容

在webpack.base.conf.js， webpack.prod.conf.js添加 https://webpack.js.org/plugins/split-chunks-plugin/ 的配置

报错
at F:\LargeFrontEnd\Webpack\bbb\node_modules?[4mextract-text-webpack-plugin?[24m\dist\index.js:171:18

yarn add extract-text-webpack-plugin@latest -D 升级一下

参考：https://blog.csdn.net/liwenfei123/article/details/80027316

版本不够新
yarn add extract-text-webpack-plugin@next -D 再次升级一下

报错
Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

将webpack.prod.conf.js的contenthash改为hash

yarn run build 打包成功