My attempt to use the webpack manifest plugin to create a manifest.json file containing keys and values for my assets with contenthash in their names has hit a snag. The issue is that the values in the manifest file have the prefix "auto" attached to them, and the paths in my index.html file also include this prefix. This has caused a problem on the testing server as it cannot locate the actual files. How can I resolve this issue?
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const {
WebpackManifestPlugin
} = require('webpack-manifest-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//watch: true,
mode: "production",
devtool: "eval-cheap-module-source-map",
entry: {
application: "./src/index.js",
admin: './src/admin.js'
},
output: {
filename: "[name]-[contenthash].js",
path: path.resolve(__dirname, 'build')
},
optimization: {
minimizer: [
new TerserJSPlugin({}),
new OptimizeCssAssetsPlugin({})
]
},
module: {
rules: [{
test: /\m?js$/,
exclude: '/(node_modules|bower_components)/',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/i,
use: [
//'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
}, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 3 versions', 'ie >9']
})
]
}
}
}
]
},
{
test: /\.scss$/i,
use: [
//'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 3 versions', 'ie >9']
})
]
}
}
}, 'sass-loader'
]
},
{
test: /\.(png|jpg|gif|svg)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[hash:7].[ext]'
}
},
{
loader: 'image-webpack-loader'
}
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.ejs$/,
loader: 'ejs-loader',
options: {
variable: 'data',
interpolate: '\\{\\{(.+?)\\}\\}',
evaluate: '\\[\\[(.+?)\\]\\]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html'
}),
new WebpackManifestPlugin({
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name]-[contenthash].css"
})
]
}Manifest.json {
"application.css": "autoapplication-4a5eb857061be614f4b2.css", "application.js": "autoapplication-b35460853f853e901d54.js", "application.jpg": "autobooks.df4be51.jpg", "admin.css": "autoadmin-4a5eb857061be614f4b2.css", "admin.js": "autoadmin-00cdbe24c96699757b97.js", "admin.jpg": "autobooks.df4be51.jpg", "books.jpg": "autobooks.df4be51.jpg"
}<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Custom template</title>
<link href="auto/application-4a5eb857061be614f4b2.css" rel="stylesheet">
<link href="auto/admin-4a5eb857061be614f4b2.css" rel="stylesheet">
</head>
<body>
<p style="background:white">Test Template</p>
<script src="auto/application-b35460853f853e901d54.js"></script>
<script src="auto/admin-00cdbe24c96699757b97.js"></script>
</body>
</html>