Debido a cómo está configurado actualmente el proyecto (heredado), no puedo beneficiarme de las capacidades de almacenamiento en caché del paquete web de la manera estándar, sino que tengo que generar los scripts en archivos vacíos (como el ejemplo main.html5) e incluirlos en el proyecto. cabeza o cuerpo.
Eso funciona bien con la configuración que tengo actualmente, pero me falta la capacidad de hacer referencia a main.[hash].js y main.[hash].css extraídos por mini-css-extract-plugin en archivos ejs separados para que podría incluir cada html5 generado en diferentes ubicaciones de mi plantilla html5 (etiqueta de enlace en el encabezado y guión en el cuerpo).
paquete web.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 solo tiene :
<%= htmlWebpackPlugin.tags.headTags %>Archivo main.html5 generado :
<script defer="" src="/dist/main.534ca9564003f8d93251.js"></script><link href="/dist/main.0864e3dfa0f6edc21e68.css" rel="stylesheet">Luego incluyo main.html5 en la plantilla de mi proyecto así:
<body> // ---- html code goes here <?php include_once 'dist/main.html5'; ?> </body> El problema es que esto carga ambas etiquetas al final de la etiqueta del cuerpo, mientras que me gustaría incluir el css en las etiquetas principales. Entonces, idealmente, tendría 2 archivos html5 generados. Uno que contiene la etiqueta del script y el otro la etiqueta del enlace . He leído la documentación del paquete web pero no veo ninguna solución posible que funcione para mi caso. Si pudiera excluir etiquetas del archivo ejs, podría ser una solución, pero no encuentro nada al respecto en la documentación de HtmlWebpackPlugin .
Por lo tanto, me enteré de html-webpack-exclude-assets-plugin que está haciendo exactamente lo que quiero, pero desafortunadamente no funciona y no se ha actualizado durante aproximadamente 5 años. Afortunadamente, hay una alternativa conhtml-webpack-skip-assets-plugin . Así es como lo uso:
paquete web.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), }, ], },Listo, ahora podemos generar la etiqueta de enlace css en un archivo html propio e incluirlo donde sea necesario en la plantilla .html5 de nuestro proyecto.