vac*_*ong 8 javascript npm webpack
我尝试使用 webpack manifest 插件来构建 manifest.json 文件，该文件包含我的资产的键和值，其名称中带有 contenthash，但它在值中包含前缀“auto”，而我的 index.html 具有带有前缀关键字“的 href 和 src” auto”也在路径中。它在测试服务器中不起作用，因为它无法找到真实的文件。我怎么能解决这个问题？
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>TLDR ; 将 webpack 配置的 publicPath 更新为 "" 应该可以解决这个问题。
详细信息： 这可能是因为您已迁移到 webpack 5。有关详细信息，请参阅有关 webpack5 迁移的文档：https ://webpack.js.org/migrate/5/
Not all ecosystem tooling is ready for the new default automatic publicPath via output.publicPath: "auto"
Use a static output.publicPath: "" instead.
| 归档时间： |
|
| 查看次数： |
1592 次 |
| 最近记录： |