如何在构建期间获取 webpack 块哈希? [英] How do I get webpack chunk hash during build?
问题描述
如何用字符串替换 HTML 模板中指向当前块哈希的变量?
我的 HTML 模板如下所示:
<头><link href="$css" rel="stylesheet"><身体><h1>你好世界</h1></html>我试图让它像这样构建:
<头><link href="app.c824da43.css" rel="stylesheet"><身体><h1>你好世界</h1></html>我尝试将字符串替换为 [name].[chunkhash:8].css ，但它呈现为字面意思:
<头><link href="[name].[chunkhash:8].css" rel="stylesheet"><身体><h1>你好世界</h1></html>我的项目:
<预><代码>.├──区│ ├── app.c824da43.css│ └── index.html├── html│ └── index.html├── package.json├── sass│ └── main.scss└── webpack.config.js我的webpack.config.js
var webpack = require('webpack');var outdir = __dirname + '/dist';const ExtractTextPlugin = require("extract-text-webpack-plugin");模块.出口 = {入口: {应用程序: ['./sass/main.scss','./html/index.html',]},输出: {路径:outdir，文件名:'[名称].[chunkhash:8].js'},模块: {规则: [{测试:/\.s[ac]ss$/,使用:ExtractTextPlugin.extract({使用: ['css-loader', 'sass-loader']})},{测试:/\.html$/,用: [{加载器:文件加载器"，选项: {name: "/[name].[ext]",},},{装载机:'字符串替换装载机'，询问: {搜索:/\$css/,//我需要在这里放什么?替换:'/[name].[chunkhash:8].css'}},{装载机:提取装载机"，},{loader: 'html-loader',选项: {最小化:真，删除评论:真实，折叠空白:真}}]}]},插件: [new ExtractTextPlugin("[name].[chunkhash:8].css"),]};我的package.json
<代码>{开发依赖":{"css-loader": "^0.28.4","提取加载器": "^0.1.0","extract-text-webpack-plugin": "^2.1.0","文件加载器": "^0.11.1","html-loader": "^0.4.5","node-sass": "^4.5.3","sass-loader": "^6.0.5","string-replace-loader": "^1.2.0","webpack": "^2.6.1"}}从 webpack 配置中删除 index.html 入口点.使用 HtmlWebpackPlugin 复制您的 index.html.该插件会自动将 CSS 标签添加到您生成的 html 中.
参见 https://github.com/jantimon/html-webpack-plugin
如果使用了插件，所有的缩小都应该在插件内部完成，而不是在 /\.html$/ 规则中的 html-loader.
new HtmlWebpackPlugin({模板:'html/index.html'，文件名:'index.html',缩小:{折叠空白:真，删除评论:真实}})How can I string replace a variable in my HTML template that points to the current chunk hash?
My HTML template looks like this:
<html>
<head>
<link href="$css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I'm trying to get it to build like this:
<html>
<head>
<link href="app.c824da43.css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I tried using string replace with [name].[chunkhash:8].css but that renders as literally:
<html>
<head>
<link href="[name].[chunkhash:8].css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
My project:
.
├── dist
│ ├── app.c824da43.css
│ └── index.html
├── html
│ └── index.html
├── package.json
├── sass
│ └── main.scss
└── webpack.config.js
My webpack.config.js
var webpack = require('webpack');
var outdir = __dirname + '/dist';
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: [
'./sass/main.scss',
'./html/index.html',
]
},
output: {
path: outdir,
filename: '[name].[chunkhash:8].js'
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
use: [
{
loader: "file-loader",
options: {
name: "/[name].[ext]",
},
},
{
loader: 'string-replace-loader',
query: {
search: /\$css/,
// What do I need to put here?
replace: '/[name].[chunkhash:8].css'
}
},
{
loader: "extract-loader",
},
{
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
collapseWhitespace: true
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin("[name].[chunkhash:8].css"),
]
};
My package.json
{
"devDependencies": {
"css-loader": "^0.28.4",
"extract-loader": "^0.1.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.5",
"string-replace-loader": "^1.2.0",
"webpack": "^2.6.1"
}
}
Remove the index.html entry point from your webpack config. Use HtmlWebpackPlugin to copy your index.html. The plugin will automatically add the CSS <link> tag to your generated html.
See https://github.com/jantimon/html-webpack-plugin
If the plugin is used, all minifications should be done inside the plugin instead of the html-loader in your /\.html$/ rule.
new HtmlWebpackPlugin({
template: 'html/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
这篇关于如何在构建期间获取 webpack 块哈希?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
