Как я могу получить хеш вебпака во время сборки?

Question

Как я могу получить хеш вебпака во время сборки?

1

Как я могу заменить строку переменной в моем шаблоне 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"
  }
}

Демо с решением

Jeff Puckett 04 июнь 2017, в 18:07

Источник

Теги:

javascript

webpack

1 ответ

Ещё вопросы

Ryan Tsui · Accepted Answer · 2017-06-05T03-22-00.000Z

Удалите точку входа index.html из вашей конфигурации webpack. Используйте HtmlWebpackPlugin для копирования index.html. Плагин автоматически добавит <link> CSS <link> к вашему сгенерированному html.

См. Https://github.com/jantimon/html-webpack-plugin

Если плагин используется, все миниатюры должны выполняться внутри плагина вместо html-загрузчика в вашем /\.html$/ правиле.

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