Webpack html-loader错误处理锚标记中的href

时间:2020-06-28 04:21:15

标签: javascript webpack webpack-html-loader

有人得到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']
    }
};

当上面的行显示为注释掉时,所有的编译和标签都得到了正确的处理,但是标签缺少其图像。

这些是我正在使用的相关软件包版本:

  • webpack:4.43.0
  • html-loader:1.1.0
  • 文件加载器:6.0.0

0 个答案:

没有答案