分几个方面说（以下的目标功能和所需模块的顺序是一一对应的）：
（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）
