vue-cli 、webpack4升级指南

原创 林间的月 教程 vue 594阅读 2018-04-06 16:00:23 举报

背景: 今天用vue的cli生成了一个项目,发现还是webpack 3的版本,所以决定升级一下,最新的4.5.0。

  • 首先要升级webpack, webpack-cli,推荐使用cnpm安装方式
    cnpm install -D webpack@latest webpack-cli@latest
  • 更新相关的依赖包

1、html-webpack-plugin => cnpm i -D html-webpacl-plugin@latest
2、webpack-dev-server => cnpm i -D webpack-dev-server@latest
3、vue-loader => npm i -D vue-loader@latest
4、extract-text-webpack-plugin => npm i -D extract-text-webpack-plugin@next

安装好后 发现提示:

看错误是图片路径的问题,考虑升级url-loader,果然成功了、

  • mode: 模式配置
    找到webpack.dev.config.js 文件,添加上 mode: 'development',

同理在webpack.prod.config.js中改成 mode: 'production',

  • CommonsChunkPlugin替换为optimization.splitChunks

在webpack.prod.config.js文件中 把CommonsChunkPlugin替换为optimization.splitChunks

这样 就能运行起来啦~

官方中文文档:https://doc.webpack-china.org/concepts/

评论 ( 1 )
最新评论
duan602728596 2018-04-08 15:33:55 1F

extract-text-webpack-plugin替换成mini-css-extract-plugin