這是Webpack+React系列配置過程記錄的第五篇。其他內容請參考：
- 第一篇：使用webpack、babel、react、antdesign配置單頁面應用開發環境
- 第二篇：使用react-router實現單頁面應用路由
- 第三篇：優化單頁面開發環境：webpack與react的運行時打包與熱更新
- 第四篇：React配合Webpack實現代碼分割與異步加載
- 第五篇：分離Webpack開發環境與生產環境的配置
這篇文章的主要內容包括：
- 增加less-loader、url-loader、file-loader，處理less文件以及圖片字體等資源文件，同時配置autoprefixer實現CSS自動添加前綴；
- 增加HtmlWebpackPlugin，動態生成html文件，能夠自動引用css和js。同時修改生成的js文件命名規則，利用hash碼命名js文件。沒有改動時可以讓瀏覽器緩存內容，當有改動重新部署后可以讓瀏覽器緩存失效；
- 拆分dev和prod兩種環境。
准備工作
在開始之前又要修改一下項目的目錄結構，主要是為了抽離前端代碼和測試用的服務器共同使用到的一些配置，以及為拆分dev和prod環境的配置做准備。由於改動內容比較多，也沒有什么需要特別注意的知識點，故不細述，有問題參考后面給出的源碼即可。
在css-loader的配置上做了一些改動。原來是使用-m后綴區分要不要對CSS文件進行模塊化處理，這次改動主要拋棄這種做法，配置了當前項目的所有CSS文件啟用模塊化處理，這樣可以在js文件中訪問css文件中定義的類。結合css-loader的文檔和我的使用體驗，發現這樣做基本滿足了目前我所碰到的場景。而針對第三方依賴（如：antd）使用的css/less文件，默認不啟用模塊化。不然可能導致打包后的網頁無法正確顯示第三方庫的樣式。
接下來開始正題。
配置less-loader、url-loader、file-loader、postcss-loader
npm安裝這幾個依賴：
npm i -D less-loader less url-loader file-loader postcss-loader
在webpack.config.js文件中添加這幾個loader的配置。這里我對url-loader和file-loader的傳參方式使用的還是舊版本的方式，僅是因為看起來比較順眼。
... { // 當前項目的less文件，啟用CSS modules test: /\.less$/, include: [config.srcPath], exclude: [config.libPath], use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ { loader: 'css-loader', options: { modules: true, importLoaders: 3, localIdentName: '[path][name]-[local]-[hash:base64:5]' } }, { loader: path.resolve(__dirname, '..', 'loader/less-css-modules-assets-fix-loader.js') }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')() ] } }, { loader: 'less-loader' } ] }) }, ... { test: /\.woff(\?.*)?$/, use: 'url-loader?prefix=fonts/&name=[name]_[hash:8].[ext]&limit=10000&mimetype=application/font-woff' }, { test: /\.woff2(\?.*)?$/, use: 'url-loader?prefix=fonts/&name=[name]_[hash:8].[ext]&limit=10000&mimetype=application/font-woff2' }, { test: /\.otf(\?.*)?$/, use: 'file-loader?prefix=fonts/&name=[name]_[hash:8].[ext]&limit=10000&mimetype=font/opentype' }, { test: /\.ttf(\?.*)?$/, use: 'url-loader?prefix=fonts/&name=[name]_[hash:8].[ext]&limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?.*)?$/, use: 'file-loader?prefix=fonts/&name=[name]_[hash:8].[ext]' }, { test: /\.svg(\?.*)?$/, use: 'url-loader?prefix=fonts/&name=[name]_[hash:8].[ext]&limit=10000&mimetype=image/svg+xml' }, { test: /\.(png|jpg|jpeg)$/, use: 'url-loader?limit=8192' } ...
這樣就可以在項目中使用less了。你可能會注意到我在配置中增加了這樣一行配置：
loader: path.resolve(__dirname, '..', 'loader/less-css-modules-assets-fix-loader.js')
這是一個自定義的loader，是為了解決less-loader在啟用模塊化時無法正確解析到在less文件中引用的外部地址的問題。請參考less-loader的這個issue。
自定義的loader代碼很簡單，執行正則表達式替換：
module.exports = function (content) { return content.replace(/url\(('|")*(\.\/)*(.+?)('|")*\)/g, 'url(./$3)').replace(/\.\/((https?|ftp):\/\/)/, '$1'); };
配置HtmlWebpackPlugin，動態命名導出文件
前面在進行代碼分割的時候留下了一個坑：需要在index.html中手動引入指定名稱的JS文件和CSS文件。一方面這樣做比較煩，另一方面對發布和更新不利（緩存導致的各種問題）。
這里使用HtmlWebpackPlugin插件解決這個問題。安裝方法是：
npm i -D html-webpack-plugin
配置上主要該了這些內容：
... // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); ... // 配置上下文到項目根目錄，這樣可以使用相對根目錄的路徑訪問其他文件，如下面的'./template/index.html' context: config.rootPath, // 修改output output: { filename: '[name].[hash:8].js', chunkFilename: 'chunk.[id].[hash:8].js', publicPath: config.publicPath }, ... // 在plugins節點添加 new HtmlWebpackPlugin({ template: './template/index.html' }), new ExtractTextPlugin({ filename: 'styles.[contenthash].css' }),
可以看到我吧output的filename和chunkFilename的命名方式都改成攻台配置的了，故生成的將會是形如main.1.xxxx.js的js文件。styles.css也加入了hash后綴。
在項目根目錄下建一個模板‘/template/index.html'，內容比以前的index.html更簡單：
<html> <head> <title>React Webpack Configuration Demo</title> </head> <body> <p>Hello world</p> <div id='main'></div> </body> </html>
刪除掉原來的index.html文件吧，這是訪問我們的網頁就可以看到這樣的內容：
它會自動搜索到需要的外部依賴，並且以正確的順序加載它們。
這里我尚有個疑問： index.html這個文件每次都會獲取到最新的內容嗎？瀏覽器對它有緩存嗎？根據看到的結果看應該沒有，不然js文件的更新就不會被正確加載了。那如果沒有被緩存又是為什么呢？，webpack有通過哪種方式處理嗎？
拆分dev和prod兩種環境
我使用比較簡單的方式拆分開發環境和生成環境的配置，分別使用不同的配置文件就行了。
把原來開發用的的webpack.config.js改成webpack.dev.config.js，並備份一份命名為webpack.prod.config.js。修改package.json和server中對配置文件的引用。
然后針對生成環境的配置文件做一些修改，主要涉及導出目錄、代碼混淆、去除冗余代碼等相關配置。用到了以下插件：
- DefinePlugin：定義環境變量
- webpack.LoaderOptionsPlugin：去除調試代碼，壓縮代碼
- webpack.optimize.UglifyJsPlugin：針對JS的混淆配置
- CopyWebpackPlugin：復制手動引入的資源文件到指定目錄
最后改了一下package.json中的scripts：
這里就不貼出詳細代碼了，看源碼吧。