HI.
I just cant make it work whith latest webpack 5.
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { extendDefaultPlugins } = require('svgo');
var HtmlWebpackEsmodulesPlugin = require('webpack-module-nomodule-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const environment = require('./configuration/environment');
module.exports = [
{
name: 'modern',
stats: 'verbose',
target: 'browserslist:modern',
entry: {
app: path.resolve(environment.paths.source, 'js', 'app.js'),
},
output: {
filename: 'js/[name].modern.js',
path: environment.paths.output,
// publicPath: '/dist/',
},
module: {
rules: [
{
test: /\.ejs$/i,
use: [
{
loader: 'html-loader',
options: {
sources: {
list: [
"...",
{
tag: "div",
attribute: "data-image-src",
type: "src",
},
{
tag: "a",
attribute: "href",
type: "src",
filter: (tag, attribute, attributes, resourcePath) => {
let shouldReturn = false;
attributes.forEach(attribute => {
if (attribute.name == 'data-add-to-html-loader') {
shouldReturn = true;
return;
}
});
if (shouldReturn) {
return true;
}
}
},
]
}
},
},
'template-ejs-loader'
],
},
{
test: /\.((c|sa|sc)ss)$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
envName: "modern"
}
}
]
},
{
test: /\.(png|gif|jpe?g|svg)$/i,
type: 'asset',
generator: {
filename: 'images/[name].[hash:6][ext][query]',
},
parser: {
dataUrlCondition: {
maxSize: environment.limits.images,
},
},
},
{
test: /\.(eot|ttf|woff|woff2)$/,
type: 'asset',
generator: {
filename: 'fonts/[name].[hash:6][ext][query]',
},
parser: {
dataUrlCondition: {
maxSize: environment.limits.fonts,
},
},
},
],
},
optimization: {
minimizer: [
"...",
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
],
],
},
},
generator: [
{
preset: "webp",
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: ["imagemin-webp"],
},
},
],
}),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/views/indexTEST.html'),
filename: 'index.html',
}),
new HtmlWebpackEsmodulesPlugin('modern')
]
},
{
name: 'legacy',
stats: 'verbose',
target: 'browserslist:legacy',
entry: {
app: path.resolve(environment.paths.source, 'js', 'app.js'),
fetch: 'whatwg-fetch',
},
output: {
filename: 'js/[name].js',
path: environment.paths.output,
},
module: {
rules: [
{
test: /\.ejs$/i,
use: [
{
loader: 'html-loader',
options: {
sources: {
list: [
"...",
{
tag: "div",
attribute: "data-image-src",
type: "src",
},
{
tag: "a",
attribute: "href",
type: "src",
filter: (tag, attribute, attributes, resourcePath) => {
let shouldReturn = false;
attributes.forEach(attribute => {
if (attribute.name == 'data-add-to-html-loader') {
shouldReturn = true;
return;
}
});
if (shouldReturn) {
return true;
}
}
},
]
}
},
},
'template-ejs-loader'
],
},
{
test: /\.((c|sa|sc)ss)$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
envName: "legacy"
}
}
]
},
{
test: /\.(png|gif|jpe?g|svg)$/i,
type: 'asset',
generator: {
filename: 'images/[name].[hash:6][ext][query]',
},
parser: {
dataUrlCondition: {
maxSize: environment.limits.images,
},
},
},
{
test: /\.(eot|ttf|woff|woff2)$/,
type: 'asset',
generator: {
filename: 'fonts/[name].[hash:6][ext][query]',
},
parser: {
dataUrlCondition: {
maxSize: environment.limits.fonts,
},
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/views/indexTEST.html'),
filename: 'index.html',
}),
new HtmlWebpackEsmodulesPlugin('legacy'),
]
}
];
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern / Legacy POC</title>
<script defer="defer" src="js/app.js"></script>
<script defer="defer" src="js/fetch.js"></script>
<link href="css/app.css" rel="stylesheet">
<script>addEventListener('DOMContentLoaded', function () {
function $l(e, d, c) { c = document.createElement("script"), "noModule" in c ? (e && (c.src = e, c.type = "module", c.crossOrigin = "anonymous")) : d && (c.src = d, c.async = true), c.src && document.head.appendChild(c) }
})</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Then it overwrites this html by this, and creates assets.index.json (that it wont never remove):
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent