手动创建vue项目webpack的配置思路

分几个方面说（以下的目标功能和所需模块的顺序是一一对应的）：
（1）css
目标功能：样式兼容浏览器，解析css中的资源，提取到单独的文件，压缩css文件体积
所需模块：

postcss-loader,  css-loader,  MiniCssExtractPlugin.loader,  mini-css-extract-plugin, optimize-css-assets-webpack-plugin

注意细节：因为MiniCssExtracPlugin需要指定提取出css文件的路径，所以除了loader还需要plugin中配置的filename属性。
（2）js
目标功能：解析导入的资源，比如import或者require，代码格式正确性检查，ES6识别
所需模块：

file-loader,  url-loader,  eslint-loader,  babel-loader,  @babel/core,  @babel/preset-env, @babel/plugin-transform-runtime

注意细节：eslint应该配置‘enforce: pre’，也就是先于babel-loader执行，他检查es6的代码
（3）vue文件
目标功能：解析vue文件并分发给对应loader，编译template成render函数（webpack不认识模板）
所需模块：

vue,  vue-loader,  vue-template-compiler

注意细节：vue-template-compiler是从vue的源码中提取的，所以版本需要保持一致，否则报错。
（4）html
目标功能：创建html入口文件到打包目录，引入html中的script link资源
所需模块：

html-webpack-plugin

注意细节：配置这个插件的filename成员template是相对于打包的目录（output.path）