I've configured [email protected] (with [email protected]) to work with html-webpack-plugin (plus [email protected] and [email protected]):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
entry: {
index: './src/index.js',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
output: {
publicPath: './',
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.s?css$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
}
},
'sass-loader',
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'file-loader',
},
],
},
};
Up to that point, everything is working fine (style.scss
is imported in index.js
, the stylesheet itself loads 2 jpgs with background-image: url(...)
).
Now, my html template (index.html
) references a file (<img src="./file.svg">
), that gets copied (by file-loader
, with another name). But the reference on the final index.html
must reflect this change.
So I installed [email protected]
:
[...]
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
[...]
Now npx webpack build
crashes without further instructions:
[webpack-cli] Compilation finished
assets by status 84 KiB [cached] 2 assets
./src/index.js 26 bytes [built] [code generated]
1 ERROR in child compilations
webpack 5.10.0 compiled with 1 error in 867 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Now what? How to get debugging information? What has gone wrong?
$ npm list
[email protected] /home/rslemos/workspace/a/webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]