Question

如何在HTML模板中用字符串替换指向当前块散列的变量？

我的HTML模板如下所示：

<html>
    <head>
        <link href="$css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

我正试图让它像这样构建：

<html>
    <head>
        <link href="app.c824da43.css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

我尝试使用[name].[chunkhash:8].css替换字符串，但字面意思是：

<html>
    <head>
        <link href="[name].[chunkhash:8].css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

我的项目：

.
├── dist
│   ├── 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");

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"),
    ]
};

我的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"
  }
}

Demo with solution

Answer 1

从webpack配置中删除index.html入口点。使用 HtmlWebpackPlugin 复制index.html。该插件会自动将CSS <link>标记添加到您生成的html。

请参阅https://github.com/jantimon/html-webpack-plugin

如果使用该插件，则所有缩小都应该在插件内完成，而不是/\.html$/规则中的html-loader。

new HtmlWebpackPlugin({
  template: 'html/index.html',
  filename: 'index.html',
  minify: {
    collapseWhitespace: true,
    removeComments: true
  }
})

如何在构建期间获取webpack块哈希？

1 个答案: