关于 devServer 有两点要说明一下:
contentBase 是来告诉服务器在哪里提供静态的内容, 这里我们使用 false 的原因是使用了 copy-webpack-plugin 插件, 不需要使用 contentBase 了;
quiet 开启后 (true), 除了初始启动信息之外的任何内容都不会被打印到控制台, 即使是 webpack 的错误或警告在控制台也不可见不过我们用了'friendly-errors-webpack-plugin'插件, 就可以设为 true 了
6.webpack.prod.conf.js
经过前面这么多代码的分析, 其实 webpack.prod.conf.js 的配置已经很简单了, 大致跟 webpack.dev.conf.js 的配置方式差不多, 就是多了几个 plugins:
UglifyJsPlugin 是用来压缩 JS 代码
optimize-CSS-assets-webpack-plugin 是用来压缩 css 代码
HashedModuleIdsPlugin 会根据模块的相对路径生成一个四位数的 hash 作为模块 id
ModuleConcatenationPlugin 可以预编译所有模块到一个包中, 加快浏览器的运行速度
CommonsChunkPlugin 拆分公共模块, vue 里拆分了 vendor,manifest 和 app 三个模块
compression-webpack-plugin gzip 压缩
webpack-bundle-analyzer 可以查看打包的具体情况, 比如打了多少个包, 每个包多大等
好了, plugins 的介绍到此结束, 接下来就是最后一个文件, 也是 npm run build 编译时的入口文件 build.js 了
同样的, build.js 文件其实也没什么可说的了, 无非就是执行 webpack.prod.conf.js 文件, 遇到错误时在命令行提示需要注意的是, build.js 里引入了 rimraf 的包, 它的作用是每次编译时清空 dist 文件, 避免多次编译时造成文件夹的重复和混乱
四. 结尾
到这里其实关于 Vue-cli 配置的分析基本结束了, 相信了解 webpack 的朋友看起来一定非常简单, 配置主要麻烦的地方在于低耦合导致经常需要来回翻文件才能看懂配置, 如果大家结合着文章开头的脑图看可能会相对容易些
一个坏消息是这个文章发布的时候 webpack4.0 已经上线了, Vue-cli 新版也进入了 Beta 测试阶段, 所以这篇文章大家看看就好, 了解一下思路, 马上配置又会更新的......
来源: https://www.cnblogs.com/caideyipi/p/8496656.html