CODEWITHSUNDEEP
javascriptwebpack
Jeff Puckett
Jeff Puckett

Reputation: 41081

How do I get webpack chunk hash during build?

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

Demo with solution

Upvotes: 3

Views: 2097

Answers (1)

Ryan Tsui
Ryan Tsui

Reputation: 948

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
  }
})

Upvotes: 2

Related Questions