Quiero colocar CSS en la etiqueta principal de mi plantilla HTML directamente en lugar de cargar CSS en JS. Pero no puedo encontrar ningún ejemplo confiable de cómo hacer esto.
/* webpack.config.js */ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = require("copy-webpack-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { mode: 'development', entry: { main: path.resolve(__dirname, 'src/script.js'), }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[contenthash].js', clean: true, }, optimization: { minimize: true, minimizer: [ new CssMinimizerPlugin(), ], }, module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'My optimized file', filename: 'index.html', template: path.resolve(__dirname, 'src/temp.html'), templateParameters: { 'style': '[name].[contenthash].css' // doesn't bind with CopyPlugin }, }), new CopyPlugin({ patterns: [ { from: path.resolve(__dirname, 'src/style.css'), to: '[name].[contenthash].css' }, ], }), ], }; Y mi plantilla HTML src/temp.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= htmlWebpackPlugin.options.title %></title> <link rel="stylesheet" href="<%= style %>"> </head> <body> <h1>Hello there!</h1> </body> </html> Ahora, como resultado en mi archivo HTML compilado dist/index.html , obtengo esto:
<head> ... <link rel="stylesheet" href="[name].[contenthash].css"> </head> Después de que el atributo href webpack build tenga solo un parámetro wapback [name].[contenthash].css en lugar del nombre de archivo CSS compilado style.347572c74109b5f9ef4e.css .
Y mi estructura de carpetas:
dist ├─ index.html ├─ main.3d522b68c880128437a8.js └─ style.347572c74109b5f9ef4e.css src ├─ script.js ├─ style.css └─ temp.html webpack.config.js package.jsonPor ahora encontré una solución temporal a este problema. Acabo de probar mini-css-extract-plugin y miré el ejemplo de html-webpack-plugin .
/* webpack.config.js */ ... module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, ] }, plugins: [ new HtmlWebpackPlugin({ template: 'template.html' }), new MiniCssExtractPlugin({ filename: 'style.css' }) ]Pero para que funcione, debe requerir CSS en el archivo JS:
/* script.js */ require('./style.css'); ... Pero todavía estoy buscando cómo hacerlo sin codificar CSS en JS usando solo el archivo webpack.config.js ya que style.css no tiene nada que ver con script.js en mi caso.