CODEWITHSUNDEEP
reactjswebpack
user2508630
user2508630

Reputation: 107

Webpack 'html-webpack-plugin' adding additional script after each build

I have using react and webpack to build bundle.js file, I using 'html-webpack-plugin' plugin because I need to add version to bundle.js file name to prevent caching after deployment, and I have faced an issue that you can see here:

https://i.sstatic.net/vl5gl.jpg

My webpack config:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');

var CleanWebpackPluginConfig = new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ['**/*.js', '!static-files*'],
    verbose: true
});

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template  : __dirname + '/dist/index.html',
    filename : 'index.html',
    inject : 'body'
});

module.exports = {
    entry: ['babel-polyfill', './src/index.web.js'],
    target: 'web',
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },

            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(jpe?g|png|gif|svg|woff|eot|ttf)$/i,
                use: [
                    'url-loader?limit=10000',
                    'img-loader'
                ]
            }
        ]
    },
    plugins: [
        CleanWebpackPluginConfig, 
        HtmlWebpackPluginConfig
    ],
    resolve: {
        extensions: ['.web.js', '.js']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.[contenthash].js',
        chunkFilename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
        hot: false,
        port: process.env.PORT || 9514,
        historyApiFallback: true
    }
};

My question is: Is it possible, to have automatically update of bundle.js file name in index.html?

Upvotes: 4

Views: 3591

Answers (1)

user2508630
user2508630

Reputation: 107

found a way how to fix it: First I have to create index-template.html file without bundle.js in it, then I have to update config here:

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template  : __dirname + '/dist/template-index.html',
    filename : 'index.html',
    inject : 'body'
});

And remove my index.html.

So it will create new index.html each time depend on template file and add script tag in new index.html.

Upvotes: 1

Related Questions