Как автоматически получить значение webpack4 chunkhash для использования в скрипте src внутри html?

Как я могу получить значение chunkhash, сгенерированное webpack4, чтобы я мог использовать его внутри моего index.html правильно установить скрипт src?

Краткий контекст: Надеюсь, это не глупый вопрос, потому что я совершенно новичок в вебпаке, начал учиться сегодня. Я знаю, как конфигурировать, извлекать js, css, минимизировать их и, возможно, выполнять все основные операции.

Это мое webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptmizerCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve('dist'),
        filename: '[chunkhash].bundle.js' // <<<<<<
    },

    mode: 'development',

    optimization: {
        minimizer: [
            new TerserPlugin({}),
            new OptmizerCssAssetsPlugin({})
        ],
        splitChunks: {
            chunks: 'all'
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    'css-loader'
                ]
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            cowsay: 'cowsay-browser'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
}

Соответствующая часть находится в filename: '[chunkhash].bundle.js' это будет производить имя файла, как 6f9e5dd33686783a5ff8.bundle.js,

Я могу использовать это имя в моем HTML как <script src="dist/6f9e5dd33686783a5ff8.bundle.js"></script> но я должен был бы изменить это каждый раз, когда код был обновлен / восстановлен.

Я был в состоянии использовать filename: '[name].bundle.js' вместо chunkhash но это не хорошо для кэширования porpouse.

Итак, есть ли способ, которым я могу получить chunkhash значение и использовать его, чтобы установить мой скрипт src имя файла в моем index.html автоматически каждый раз, когда я строю проект?

Любой действительный совет будет приветствоваться!

Источник

1 ответ

Решение

Хорошо, я нашел способ.

Я использовал плагин ниже, потому что он позволил мне использовать мой HTML в качестве файла шаблона. Я просто должен был удалить link а также script теги и пусть он вставит их в окончательный HTML, который он будет генерировать.

Вот как я сделал:

1 - установить плагин html-webpack-

npm i -D html-webpack-plugin

2 - Двигайся /index.html как /src/main.html

Потому что мои конфиги сгенерируют файл с именем index.html, Переименовать шаблон как main.html избегает возможных недоразумений

3 - Добавьте его в разделы плагинов webpack.config.js

// ... other imports here ... //

const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve('dist'),
        filename: '[chunkhash].bundle.js' // **** using chunkhash
    },

    mode: 'development',

    optimization: {
        minimizer: [
            new TerserPlugin({}),
            new OptmizerCssAssetsPlugin({})
        ],
        splitChunks: {
            chunks: 'all' // **** config the WebPack SplitChunksPlugin
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    'css-loader'
                ]
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            cowsay: 'cowsay-browser'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[contenthash].css' // **** using contenthash
        }),

// **** new config: 
        new HtmlPlugin({
            filename: 'index.html',
            template: path.resolve('src', 'main.html')
        })
    ]
}

4 - это все!

Теперь, когда я строю свой проект, мой /src/main.html разбирается, все css link теги и сценарии js теги вставляются автоматически в новый /dist/index.html файл (см. ниже):

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Vacapack</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- LOOK THIS: //-->
    <link href="css/7358f9abc5c8cea68707.css" rel="stylesheet"></head>
    <body>
        <pre id="caixa"></pre>
    <!-- AND THESE: //-->
    <script type="text/javascript" src="b6183f7997b49195d1f8.bundle.js"></script>
    <script type="text/javascript" src="0e374d6ca9b34e89e18f.bundle.js"></script></body>
</html>

Надеюсь, что это может помочь кому-то еще!

Источник
Другие вопросы по тегам