How to ignore error js script tag from html on running webpack with HtmlWebpackPlugin?

Question

How can i ignore the script tag in Html webpack plugin?

Because I have added this

<script src="cordova.js"/>

tag into my index.html template anonymously for my app development.

See my configuration in Webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "www"),
        filename: "./js/build/[name].build.js",
        chunkFilename: "./js/build/[name].build.js",
        // publicPath: "./js/build/",
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "./",
                        },
                    },
                    "css-loader?url=false",
                    "sass-loader",
                ],
            },
            {
                test: /\.html$/,
                use: ["html-loader"],
            },
            {
                test: /\.(svg|png|jpeg|jpg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "res",
                    },
                },
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/build/[name].css",
            // chunkFilename: "../css/[id].css"
        }),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
        // new BundleAnalyzerPlugin()
    ],
    // devtool: "inline-source-map",
};

I just wanted to ignore the script on production and I have researched this many times but unfortunately I don't see any solution

Answer 1

So, if I got the problem right, you want to ignore a certain resource when bundling for production.

The html-loader has an option to filter sources based on attribute, attribute value, context file and anything you have available in you webpack.config.js.

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");

    // Assuming you are passing arguments to your webpack config like argv.mode
    const PRODUCTION = true;
    
    module.exports = {
        mode: "development",
        entry: "./src/index.js",
        output: {
            path: path.resolve(__dirname, "www"),
            filename: "./js/build/[name].build.js",
            chunkFilename: "./js/build/[name].build.js",
            // publicPath: "./js/build/",
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"],
                        },
                    },
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: "./",
                            },
                        },
                        "css-loader?url=false",
                        "sass-loader",
                    ],
                },
                {
                    test: /\.html$/,
                    use: {
                      loader: "html-loader",
                      options: {
                        sources: {
                          urlFilter: (attribute, value, resourcePath) => {
                            if (PRODUCTION && /cordova.js$/.test(value)) {
                              return false;
                            }
                          
                            return true;
                          },
                        }
                      },
                    },
                },
                {
                    test: /\.(svg|png|jpeg|jpg|gif)$/,
                    use: {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "res",
                        },
                    },
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "./css/build/[name].css",
                // chunkFilename: "../css/[id].css"
            }),
            new HtmlWebpackPlugin({
                template: "./src/index.html",
            }),
            // new BundleAnalyzerPlugin()
        ],
        // devtool: "inline-source-map",
    };

In the html module rule, I added an options property to html-loader with an example how you could ignore a certain resource with urlFilter. Check the html-loader docs on filtering resources

You will need to get a reference to the variables you passed to your cli like --mode eg. line 5-6. (Not in the current example) See webpack docs on env vars.