有人得到Webpack / html-loader来处理锚标记(href属性)中的图像引用吗?我正在使用以下webpack配置,当包含以下注释行时,该配置会引发错误“回调已被调用”:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
mode: devMode ? "development" : "production",
entry: {
index: "./src/js/pages/index.js",
contact: "./src/js/pages/contact.js",
},
plugins: [
new webpack.ProvidePlugin({
$: path.resolve(path.join(__dirname, 'node_modules/jquery')),
jQuery: path.resolve(path.join(__dirname, 'node_modules/jquery')),
'window.jQuery': path.resolve(path.join(__dirname, 'node_modules/jquery')),
Util: 'exports-loader?Util!bootstrap/js/dist/util'
}),
new HtmlWebpackPlugin({
template: "./src/contact.shtml",
filename: "contact.shtml",
inject: true,
chunks: ['contact']
}),
new HtmlWebpackPlugin({
template: "./src/index.shtml",
filename: "index.shtml",
inject: true,
chunks: ['index']
}),
new MiniCssExtractPlugin({
filename: devMode ? "css/[name].css" : "css/[name].[hash].css",
chunkFilename: devMode ? "[id].css" : "[id].[hash].css",
publicPath: '../'
})
],
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/[name].bundle.js"
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: devMode
})
]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } }
},
{
test: /\.s?html$/i,
loader: 'html-loader',
options: {
attributes: {
list: [
{ tag: 'img', attribute: 'src', type: 'src' },
{ tag: 'link', attribute: 'href', type: 'src' },
// { tag: 'a', attribute: 'href', type: 'src' } <--- throws error when included
]
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
hmr: process.env.NODE_ENV === 'development'
}
},
{
loader: "css-loader",
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
publicPath: "../fonts",
outputPath: "./fonts",
emitFile: true
}
}
]
},
{
test: /\.(php)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
emitFile: true
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg|ico)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: 'images/',
emitFile: true
}
}
]
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.scss']
}
};
当上面的行显示为注释掉时,所有的编译和标签都得到了正确的处理,但是标签缺少其图像。
这些是我正在使用的相关软件包版本: