資訊專欄INFORMATION COLUMN
摘要：問題來源于思路使用來給文件加使用插件來給文件加使用插件來自動根據加的來引入對應的和并生成文件安裝無需安裝因為已經帶了版，如果自己安裝了版反而可能出問題。
問題來源于：https://github.com/sorrycc/ro...
Workaround:
使用 webpack output 來給 js 文件加 hash
使用插件 extract-text-webpack-plugin 來給 css 文件加 hash
使用插件 html-webpack-plugin 來自動根據
webpack 加的 hash 來引入對應的 css 和 js 并生成 html 文件
npm i -D ejs-loader html-webpack-plugin webpack-md5-hash
無需安裝 extract-text-webpack-plugin 因為 roadhog 已經帶了 1.0.1 版，如果自己安裝了 2.x 版反而可能出問題。需要額外安裝 ejs-loader 因為 webpack 配置里會用到
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const WebpackMd5Hash = require("webpack-md5-hash")
module.exports = function (config, env) {
config.module.loaders[0].exclude.push(/.ejs$/) // 注 1
if (env === "production") {
config.output.filename = "[name].[chunkhash].js"
config.output.chunkFilename = "[chunkhash].async.js"
config.plugins[3] = new ExtractTextPlugin("[contenthash:20].css") // 注 2
config.plugins.push(
new HtmlWebpackPlugin({
template: "ejs!src/index.ejs", // 注 3
inject: false,
minify: { collapseWhitespace: true },
production: true,
}),
new WebpackMd5Hash()
)
} else {
config.plugins.push(
new HtmlWebpackPlugin({
template: "ejs!src/index.ejs",
inject: true,
}),
)
}
return config
}
[1] roadhog 默認配置把非 特定格式 的文件都用 url-loader 去加載，但是 html-webpack-plugin 需要的 ejs 文件會變成 base64 編碼，所以要把 ejs 格式加入 loader 白名單，參考
[2] 覆蓋 roadhog 的 配置
[3] roadhog 對 html 默認用的 file-loader，這里的 html-webpack-plugin 需要讀取其內容作為模板，所以換成 ejs，也就不再需要 index.html
{
"env": {
"production": {
"define": {
"__CDN__": "https://cdn.example.com"
}
}
}
}
{
"globals" : {
"__CDN__": false
}
}
Example <% if (htmlWebpackPlugin.options.production) { %> <%= htmlWebpackPlugin.files.css.map((item) => { return `` }) %> <% } %> <% if (htmlWebpackPlugin.options.production) { %> <%= htmlWebpackPlugin.files.js.map((item) => { return `` }) %> <% } %>