使用webpack4+vue-cli开发，问题总结（1）

1.使用vue-cli脚手架开发，会默认生成一个目录文件，基本结构大概如下：

在build目录下，如图所示

如果将webpack从3.6升级为4.5以上的版本，可能就会遇到问题。

1.据官方文档说明extract-text-webpack-plugin插件在后期会被移除，让使用mini-css-extract-plugin 插件替换。

a:在utils.js文件中需要修改:

这里就要修改一下，否则报错。

webpack.prod.conf.js文件需要去掉：commonsChunkPlugin 部分

在webpack4中 commonsChunkPlugin ，官方使用 SplitChunksPlugin 代替。

添加如下：

2.如果在IE下运行，会发现报错，界面出不来，那可能是没有引入 babel-polyfill包

需要，先引入 babel-polyfill 包   然后  修改 webpack.base.conf.js 文件。

3. 关于图片引入路径问题：

首先需要了解assets文件夹和static文件夹的作用：

1.assets一般用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。

2.static用来放没有npm包的第三方插件，比如说引入富文本插件UEditor。

3.assets与components同级  components下的.vue 文件引用静态文件时，相对路径为 ../assets/images

vue文件中的style下：

这两个目录的区别大概如下：

一：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了。

二：assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用，在script下必须用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入。

一般情况下 src目录下的资源只能import或require引入使用。静态引入就放在static中，而且static文件夹与src文件夹同级。

暂时就总结这些个问题，欢迎指正，多多交流。

另外可以查看网友这篇文章： Webpack4 新特性 及 Vue-cli项目升级