webpack搭建一个项目

热替换

因为我们搭建的工程化项目不是自动化的，修改一行代码必须编译，这是一件非常麻烦的一件事，我们需要自动化的编译的，这时候就需要启动服务，借助webpack-dev-server 插件

webpack3升级webpack4

npm install vue-cli -g
vue init webpack 项目名 然后就一直默认
cd 项目名
npm run dev （正常的界面就表示成功） 查看package.json中的webpack的版本号，版本是3的升级到4 npm install [email protected]^4 -D 运行之后会发现报错，所以我们要根据报错内容来处理，因为webpack升级了，那webpack-dev-server也需要升级到最新 npm install [email protected] -D 运行之后报错，提示你webpack-cli没有安装 cnpm install [email protected] -D 运行报html-webpack-plugin错 cnpm install [email protected] -D 运行报eslint-loader错误 cnpm install [email protected] -D 运行报vue-loader错误
cnpm install [email protected] -D
cnpm install [email protected] -D
cnpm install [email protected] -D

再次运行就成功了

打包的时候回发现报错，是因为 webpack.optimize.CommonsChunkPlugin不用了，看这里，在webpack.prod.conifg.js添加对应的代码

将 CommonsChunkPlugin对应的注释掉
cnpm install [email protected] -D

如果你一直报这个错误

全局搜minRemainingSize将这行代码去掉

就搜索contenthash将contenthash改成hash

这样就打包成功了