gpt4 book ai didi

webpack - 如何使用 HtmlWebpackPlugin 将 block 注入(inject) html

转载 作者:行者123 更新时间:2023-12-04 08:53:57 28 4
gpt4 key购买 nike

问题是当我使用 HtmlWebpackPlugin 和 splitChunks 时,无法将 block 注入(inject)到生成的 html 中。
我对 Webpack 4 的配置是

var loading = {
ejs: fs.readFileSync(path.resolve(__dirname, 'template/loading.ejs')),
css: fs.readFileSync(path.resolve(__dirname, 'template/loading.css')),
};

module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.[hash].js',
chunkFilename: '[name].[chunkhash].js',
},
mode: 'production',
// ...
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
use: 'happypack/loader?id=babel',
},
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory'],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template/index.ejs'),
loading: loading,
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer',
}),
],
optimization: {
splitChunks: {
chunks: 'all',
name: true,
automaticNameDelimiter: '-',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};

模板 index.ejs
<!DOCTYPE html>
<html lang="en">

<head>
// ...
<title>React</title>
<style>
<%=htmlWebpackPlugin.options.loading.css %>
</style>
</head>

<body>
<div id="root">
<%= htmlWebpackPlugin.options.loading.ejs %>
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js" defer></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" defer></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js" defer></script>

</body>

</html>

当我运行 yarn build ,它将生成 main.[hash].js , 1.[hash].jsindex.html .但是 1.[hash].js没有注入(inject)到html中。HtmlWebpackPlugin的版本是3.2.0。我该如何解决这个问题?谢谢!

最佳答案

因为我使用 react-loadable , chunks 不会被注入(inject)到生成的 html 中。所以,这不是问题。

关于webpack - 如何使用 HtmlWebpackPlugin 将 block 注入(inject) html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52157653/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com