webpack4自定義項目腳手架

不少時候利用React、Vue這類UI框架，爲了快速開發項目，直接使用了官方推薦vue-cli或者create-react-app的腳手架。近段時間研究了不少webpack打包文章和資料。本身動手搭建了一個Vue項目腳手架。

腳手架目錄

這個腳手架時基於webpack 4.36.1,配置部分可能跟webpack3版本有衝突，過程之中會提出。如今主要webpack配置主要分打包環境和開發環境，分別對應webpack.dev.conf.js和webpack.prod.conf.js。後面會利用webpack-merge把兩部分公用的環境配置抽取到webpaack.base.conf.js。其中dist目錄下是打包環境打包的chunk包。

腳手架Github地址：https://github.com/Harhao/webpack

|-- build                                   
|   |-- webpack.base.conf.js                
|   |-- webpack.dev.conf.js （開發環境webpack配置文件）                
|   `-- webpack.prod.conf.js （打包環境webpack配置文件）              
|-- config                                  
|   `-- index.js（webpack一些配置，例如webpack-dev-server）                            
|-- dist                                    
|   |-- framework_180dff6fd8b94a15.js(抽取的公共類庫，vue，vue-router，vuex等)      
|   |-- index.html                          
|   |-- main_180dff6fd8b94a15.js（打包的js文件）            
|   |-- main_fdef942b.css（打包的css文件）                   
|   `-- vendors~main_180dff6fd8b94a15.js    
|-- package.json（項目依賴及npm scripts定義）                            
|-- public                                  
|   `-- index.html（掛載文件）                          
`-- src （vue開發目錄）                                    
    |-- App.vue                             
    |-- main.js                             
    |-- router                              
    |   `-- index.js                        
    `-- views                               
        |-- admin                           
        |   `-- index.vue                   
        `-- login                           
            `-- index.vue                   
複製代碼

開發環境配置文件分析

webpack.dev.conf.js主要是提供開發單頁應用時的打包配置文件，包含了熱更新、vue文件處理、打包後chunk包注入等功能。開發環境配置文件沒有添加過多的其餘plugin,保留了基本的一些開發必要的環境配置。下面會詳細說明一些插件和配置信息的做用。

各種loader

webpack只提供了js的模塊打包功能。像其餘.vue,.jsx,·.tsx,scss等後綴的文件，主要依賴於各種的loader負責處理，而後進行打包操做。在平常利用vue進行開發中，主要使用到單頁文件模板開發（即.vue後綴的模板），webpack沒法對該類文件處理。因此須要vue-loader對該類文件進行轉換。css的預編譯scss須要sass-loader和node-sass支持，scss文件處理loader執行順序是從後面往前執行的，sass-loader,css-loader，style-loader。

對於處理es6語法，須要babel-loader轉換編譯，而babel-loader須要@babel/core,@babel/preset-env。如今用的babel-loader是8.0.6版本，須要比較新版本的@babel/core,@babel/preset-env配合使用。在根目錄下建立一個.babelrc文件，內容以下：

{
  "presets": [
    "@babel/preset-env"
  ]
}
複製代碼

設置輸出路徑

output字段設置打包文件輸出路徑配置。filename是輸出文件命令，其中name,hash都是內置的變量名，還包括id和chunkhash打包內容哈希值。path是輸出路徑指定，若是採起相對路徑，是相對於當前運行的路徑。這裏採起的經過path.resolve來配置路徑。其中publicPath字段是配置發佈到線上資源的 URL 前綴，爲string 類型，這裏若是設置了vue-router的base,須要對此字段進行配置，否則會出現資源路徑問題。

注入打包後的chunk

經過webpack打包文件，總不能手動把chunk引入index.html,這個社區提供了html-webpack-plugin爲咱們提供手動和自動注入打包文件路徑，感謝開源社區提升生產力。devtool設置開發環境生成.map文件，方便咱們定位開發錯誤。到如今基本已經能夠正常運行打包vue開發了。不過每一次咱們修改開發內容，還得從新打包一次，多麻煩。

webpack-dev-server熱更新

平常開發過程當中，須要更新查看修改的內容，開源插件webpack-dev-server爲咱們提供了一個本地的express服務，熱更新修改的內容。提升咱們的效率。有關webpack-dev-server的配置放在config/index.js中，以下所示：

其中resolve字段是配置配置 Webpack 怎樣尋找模塊所對應的文件。開發中常常遇到跨越狠多層級去import所須要的模塊，這裏就可使用resolve.alias配置別名定義一個目錄，不用太長路徑，相似於import api from '../../../api這類出現。

生成環境配置文件分析

webpack配置生產環境，須要對css文件提取，js文件壓縮等；一些公用類庫文件進行提取，相似於vue,vue-router,vuex,axios等

mini-css-extract-plugin

webpack4已經廢棄了 extract-text-webpack-plugin對css文件的提取，建議使用mini-css-extract-plugin。與webpack.dev.conf.js不一樣之處在於，由mini-css-extract-plugin替代style-loader。其中filename,定義抽取的css的名稱。

clean-webpack-plugin

clean-webpack-plugin是清除每次打包chunk包。每次npm run build都會產生打包文件，因此使用clean-webpack-plugin很方便清除多餘的文件。clean-webpack-plugin使用很簡單。

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin對打包的js文件進行壓縮。minimizer中經過test正則表達式匹配js後綴對的文件進行壓縮。

optimization.splitChunks

webpack3以前使用CommonsChunkPlugin進行分包。在webpack4中正式提供了optimization.splitChunks進行分包。在entry中設置了入口文件framework:["vue","vue-router","vuex"]須要分包的文件。在optimization.splitChunks定義抽取的文件。

生產環境全瞰

運行效果

開發環境預覽

vue的項目中,使用了vue-router,vuex依賴包，運行效果以下所示:

開發環境打包

總結

後面關於打包構建速度的優化,能夠查看下一篇webpack4自定義腳手架優化。