个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 14:58:58 26 4
gpt4 key购买 nike

如何获取 webpack4 生成的 chunkhash 值，以便我可以在我的 index.html 中使用它正确设置脚本源？

简要背景:希望这不是一个愚蠢的问题，因为我是 webpack 的新手，今天才开始学习。我知道如何配置、提取 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但它不适合缓存海豚。

那么，有什么办法可以得到 chunkhash值并使用它在我的 index.html 中设置我的脚本 src 文件名每次我构建项目时自动？

我们欢迎任何有效的建议!

最佳答案

好的，我找到了一个方法。

我使用了下面的插件，因为它让我可以将我的 html 用作模板文件。我只需要删除 link 和 script 标签，然后让它将它们插入到它将生成的最终 html 中。

我是这样做的:

1 - 安装 html-webpack-plugin

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>

希望对其他人有所帮助!

关于javascript - 如何自动获取 webpack4 chunkhash 值以在 html 中的脚本 src 中使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57642836/

26 4 0
文章推荐： java - 无法通过java客户端获取Hadoop作业信息
文章推荐： c++ - 这是实现通用 operator== 和 operator< 的安全方法吗？
文章推荐： html - 在桌面浏览器窗口中以不同视口(viewport) [移动设备、平板电脑、桌面设备] 呈现网站
文章推荐： java - Thread Main 中的异常 : ClassNotFoundException
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com