由于(遗留)项目目前的设置方式，我无法以标准方式从webpack的缓存功能中受益，而是必须在空文件中生成脚本(如main。(Html5示例)，并将其包含在项目的标题或正文中。
这与我目前拥有的配置很好，但我发现自己缺乏引用mini-css-extract-plugin提取的main.[hash].js和main.[hash].css的能力。在单独的ejs文件中，这样我就可以在html5模板的不同位置包含每个生成的html5(链接标签在头部，脚本在主体)。
webpack.common.js:
module.exports = {
entry: {
main: path.resolve(__dirname, "./react/src/Index.js"),
styles: path.resolve(__dirname, "./react/src/Styles.js"),
vendor: path.resolve(__dirname, "./react/src/Vendor.js"),
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].[contenthash].js",
assetModuleFilename: "images/[hash][ext][query]",
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./react/main.ejs"),
filename: "main.html5",
inject: false,
publicPath: "/dist/",
chunks: ["main"], // would be great to only reference .js here, then create another instance for .css
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
主要。ejs只有:
<%= htmlWebpackPlugin.tags.headTags %>
生成的主要。html5文件:
<script defer="" src="/dist/main.534ca9564003f8d93251.js"></script><link href="/dist/main.0864e3dfa0f6edc21e68.css" rel="stylesheet">
则包含main。将Html5放入我的项目模板中，如下所示:
<body>
// ---- html code goes here
<?php include_once 'dist/main.html5'; ?>
</body>
问题是，这在正文标签的末尾加载了两个标签，而我想在头部标签中包含css。所以理想情况下，我会生成2个html5文件。一个包含脚本标签和另一个链接标签。我已经阅读了webpack的文档，但没有看到任何可能的解决方案，将为我的情况下工作。如果我可以从ejs文件中排除标签，这可能是一个解决方案，但我未能在HtmlWebpackPlugin中找到任何有关的内容。文档。
所以，我发现了html-webpack-exclude-assets-plugin这正是我想要的，但不幸的是，它没有工作，并没有更新约5年。值得庆幸的是，有一个替代html-webpack-skip-assets-plugin。下面是我的用法:
webpack.common.js:
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackSkipAssetsPlugin =
require("html-webpack-skip-assets-plugin").HtmlWebpackSkipAssetsPlugin;
module.exports = {
entry: {
main: path.resolve(__dirname, "./react/src/Index.js"),
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].[contenthash].js",
assetModuleFilename: "images/[hash][ext][query]",
},
optimization: {
minimizer: [`...`, new CssMinimizerPlugin()],
splitChunks: {
cacheGroups: {
styles: {
name: "styles",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./react/vendor.ejs"),
filename: "vendor.html5",
inject: false,
publicPath: "/dist/",
chunks: ["vendor"],
excludeAssets: [
//dist/styles.*.css/,
(asset) => asset.attributes && asset.attributes["x-skip"],
],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./react/styles.ejs"),
filename: "styles.html5",
inject: false,
publicPath: "/dist/",
chunks: ["main"],
// excludeAssets: [/.css$/i]
excludeAssets: [
//dist/main.*.js/,
(asset) => asset.attributes && asset.attributes["x-skip"],
],
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
new HtmlWebpackSkipAssetsPlugin(),
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /.css$/i,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /.(?:ico|gif|png|jpg|jpeg)$/i,
type: "asset/resource", //* less performance heavy than asset/inline
},
{
test: /.(woff(2)?|eot|ttf|otf|svg)$/i,
type: "asset/inline", //* only for small assets. if webpack complains about asset size limit, change to asset/ressource type or asset. Had these as inline before (woff(2)?|eot|ttf|otf|svg),
},
],
},