由于（遺留）專案當前的設定方式，我無法以標準方式從 webpack 的快取功能中受益，而是必須在空檔案中生成腳本（如 main.html5 示例）并將這些腳本包含在專案的頭部或身體。
這適用于我目前擁有的配置，但我發現自己缺乏參考由mini-css-extract-plugin單獨的 ejs 檔案提取的 main.[hash].js 和 main.[hash].css 的能力，以便我可以將每個生成的 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",
}),
],
main.ejs 只有：
<%= htmlWebpackPlugin.tags.headTags %>
生成的 main.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>
問題是這會在 body 標簽的末尾加載兩個標簽，而我想在 head 標簽中包含 css。所以理想情況下，我會生成 2 個 html5 檔案。一個包含腳本標簽，另一個包含鏈接標簽。我已經閱讀了 webpack 的檔案，但沒有看到任何可能適用于我的案例的解決方案。如果我可以從 ejs 檔案中排除標簽，這可能是一個解決方案，但我無法在HtmlWebpackPlugin檔案中找到任何相關內容。
uj5u.com熱心網友回復：
所以，我發現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),
},
],
},
好了，我們現在可以在自己的 html 檔案中生成 css 鏈接標記，并將其包含在我們專案的 .html5 模板中需要的任何位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341223.html
標籤：javascript 网络包 遗产 html-webpack-plugin mini-css-extract-plugin