之前項目一直使用官方的腳手架vue-cli，官方的用的webpack是3.6 版本，因為是單頁面項目，随着項目越來越大，發現每次改動一個小地方編譯速度很慢，隻有通過不停的注釋路由才提升編譯速度，而webpack4 會提升很大的編譯速度，是以打算自己寫一個webpack4.x+babel7.x+vue的多頁面應用腳手架， github位址：https://github.com/zhanghang2017/webpack4.x-vue2.x。
這是搭建好的目錄結構。
webpack4 改變在腳手架的展現為在css 的提取和代碼分割上，還有一個mode屬性。
1、css 采用mini-css-extract-plugin
2、代碼分割采用 optimization.splitChunks
而 js 和css的壓縮：
1、js 壓縮是mode來控制：當設定成的production時，編譯出來的js 就會自動壓縮；
2、css 壓縮：我是通過post-css 的cssnano 插件來實作的。
babel7和postcss配置檔案 在.babelrc和postcss.config.js。
下面說一下多頁面配置。
是通過讀取src 檔案下面檔案夾，拿到下面的js 和HTML來作為入口的js和html template檔案。
在webpack.base.conf.js 中：
在webpack.dev.conf.js和webpack.prod.conf.js 中
将html template 插件放入。
多頁面我是采用檔案夾來多每個入口key和html 命名，檔案夾子級隻允許有一個js 和html檔案。不然找入口檔案和template檔案可能會出錯。
文章很短，寫的時間也很短，但是基本懂vue配置的基本一看就會哈。