Javascript 如何自动获取webpack4 chunkhash值以在html内的脚本src中使用？_Javascript_Html_Webpack 4_Webpack Splitchunks_Splitchunksplugin

Javascript 如何自动获取webpack4 chunkhash值以在html内的脚本src中使用？

javascript html

Javascript 如何自动获取webpack4 chunkhash值以在html内的脚本src中使用？,javascript,html,webpack-4,webpack-splitchunks,splitchunksplugin,Javascript,Html,Webpack 4,Webpack Splitchunks,Splitchunksplugin,如何获取webpack4生成的chunkhash值，以便在index.html中使用它来正确设置脚本src 简要内容：希望这不是一个愚蠢的问题，因为我是网页的新手，从今天开始学习。我知道如何配置、提取js、css、缩小它们，也许还有所有最基本的操作这是我的webpack.config.js： const path = require('path') const webpack = require('webpack') const MiniCssExtractPlugin = require('

如何获取webpack4生成的chunkhash值，以便在

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

const path=require（'path'））
const webpack=require（'webpack'）
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）
const optmizercsassetsplugin=require（'optimize-css-assets-webpack-plugin'））
const TerserPlugin=require（'terser-webpack-plugin'）
module.exports={
条目：'./src/index.js'，
输出：{
path:path.resolve（'dist'），
文件名：'[chunkhash].bundle.js'/好的，我找到了一种方法
我使用下面的插件是因为它允许我使用html作为模板文件。我只需删除链接
和脚本
标记，然后让它将它们插入最终生成的html中
我就是这样做的：
1-安装html网页包插件
npm i-D html网页包插件

2-将我的/index.html
移动为/src/main.html
因为我的配置将生成一个名为index.html
的文件。将模板重命名为main.html
可以避免可能的混淆
3-将其添加到webpack.config.js的插件部分
4-就这些！
现在，当我构建我的项目时，我的/src/main.html
将被解析，所有csslink
标记和script js标记将自动插入一个新的/dist/index.html
文件（见下文）：

瓦卡帕克

希望它能帮助别人
// ... 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')
        })
    ]
}

<!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>