定义process.env
HotModuleReplacementPlugin: 模块热替换插件
NameModulesPlugin: 显示模块加载相对路径插件
NoEmitOnErrorsPlugin: 在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
HtmlWebpackPlugin: 使用插件生成一个指定的模版。
后,还有一个函数,确保启动程序时,如果端口被占用时,会通过portfinder来发布新的端口,然后输出运行的host字符串。
webpack.prod.conf.js
这是打包到生产环境中,会被用到的文件。我们可以看到,它相对于之前的webapck.dev.conf.js文件少了一些插件,多了更多的插件。我们也可以和之前一样,通过它新增的一些东西,来知道它到底干了什么!(此处的新增是相对于webpack.dev.conf.js没有的内容)
新增了output的配置,我们可以看到它在output中新增了一些属性,将js打包成不同的块chunk,然后使用hash尾缀进行命名
添加了一些插件:
UglifJsPlugin: 这个是用来丑化js代码的
ExtractTextplugin: 这里新增了一些属性,在打包的css文件也增加了块和hash尾缀
OptimizeCssplugin: 这里是来优化css文件的,主要就是压缩css代码
HashedModuleIdsPlugin: 保证module的id值稳定
optimize: 这里是webpack一系列优化的措施,具体可以逐一查看官方文档
CopyWebPlugins: 自定义assets文件目录
如果没有进行gzip压缩,调用CompressionWebpackPlugin插件进行压缩
这样,我们的webpack配置文件内容基本上就全部看完了。或许,会有点蒙,还是看官方文档来的实在。
最后,还需要分析一个build.js文件。
build.js
这个文件是在打包的时候,会被用到的。
首先,文件的开头请求了check-version.js中的函数,然后确定了一下node和npm的版本。相对于较低版本的node和npm,在打包过程中,会产生警告。之后,设置环境参数,设置成生产环境,之后就是一系列打包的流程。
总结
本篇文章,主要总结了一下vue-cli生成的文件中,其中的一些配置参数和文件大致的作用。有不到位的地方,希望大家可以指正。同时希望我们共同进步,共勉。










