Webpack 'html-webpack-plugin', добавляющий дополнительный скрипт после каждой сборки - PullRequest
0 голосов
/ 11 апреля 2019

Я использую реагирование и веб-пакет для создания файла bundle.js, я использую плагин 'html-webpack-plugin', потому что мне нужно добавить версию к имени файла bundle.js, чтобы предотвратить кэширование после развертывания, и я столкнулся с проблемойчто вы можете увидеть здесь:

https://imgur.com/a/yM1NI8n

Мой конфиг веб-пакета:

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

Мой вопрос: возможно ли автоматическое обновление bundle.js?имя файла в index.html?

1 Ответ

0 голосов
/ 11 апреля 2019

нашел способ как это исправить: Сначала я должен создать файл index-template.html без bundle.js, а затем обновить конфигурацию здесь:

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

И удали мой index.html.

Таким образом, он будет каждый раз создавать новый index.html в зависимости от файла шаблона и добавлять тег сценария в новый index.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...