分幾個(gè)方面說（以下的目標(biāo)功能和所需模塊的順序是一一對(duì)應(yīng)的）：
（1）css
目標(biāo)功能：樣式兼容瀏覽器，解析css中的資源，提取到單獨(dú)的文件，壓縮css文件體積
所需模塊：

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

注意細(xì)節(jié)：因?yàn)镸iniCssExtracPlugin需要指定提取出css文件的路徑，所以除了loader還需要plugin中配置的filename屬性。
（2）js
目標(biāo)功能：解析導(dǎo)入的資源，比如import或者require，代碼格式正確性檢查，ES6識(shí)別
所需模塊：

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

注意細(xì)節(jié)：eslint應(yīng)該配置‘enforce: pre’，也就是先于babel-loader執(zhí)行，他檢查es6的代碼
（3）vue文件
目標(biāo)功能：解析vue文件并分發(fā)給對(duì)應(yīng)loader，編譯template成render函數(shù)（webpack不認(rèn)識(shí)模板）
所需模塊：

vue,  vue-loader,  vue-template-compiler

注意細(xì)節(jié)：vue-template-compiler是從vue的源碼中提取的，所以版本需要保持一致，否則報(bào)錯(cuò)。
（4）html
目標(biāo)功能：創(chuàng)建html入口文件到打包目錄，引入html中的script link資源
所需模塊：

html-webpack-plugin

注意細(xì)節(jié)：配置這個(gè)插件的filename成員template是相對(duì)于打包的目錄（output.path）