NodeJS Webpack不会从开发中的HtmlWebpackPLugin中删除样板文件

bksxznpy 于 2023-08-04 发布在 Node.js

关注(0)|答案(1)|浏览(139)

我拥有以下页面：
1.关于
1.联系方式
1.家
1.投资组合
这些页面是“模板”，没有更多，也没有更少，我在它们的头部注入了index.js和index.scss，沿着所有相同的标题，目标等。
但在开发模式下，它仍然保留<%= htmlWebpackPlugin.tags.headTags %>。

的数据

HTML模板页面示例：

<html lang="en">

<head>
    <%= htmlWebpackPlugin.tags.headTags %>
</head>

<body>
    X
</body>

</html>

字符串

WEBPACK CONFIG：

const path = require('path');
const AutoPrefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const HTML_WEBPACK_PLUGIN = {
    minify: true,
    cache: true,
    favicon: '',
    meta: {
        viewport: 'width=device-width, initial-scale=1',
    },
};

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'HOME PAGE', filename: 'index.html', template: 'src/pages/home.html' }),
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'ABOUT PAGE', filename: 'about.html', template: 'src/pages/about.html' }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'PORTFOLIO PAGE',
            filename: 'portfolio.html',
            template: 'src/pages/portfolio.html',
        }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'CONTACT PAGE',
            filename: 'contact.html',
            template: 'src/pages/contact.html',
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
        }),
    ],
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        port: 8080,
        hot: false,
        liveReload: true,
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            new CssMinimizerPlugin({
                minify: CssMinimizerPlugin.cleanCssMinify,
                parallel: true,
            }),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
                minify: TerserPlugin.uglifyJsMinify,
            }),
        ],
    },
    output: {
        clean: true,
        filename: '[name].[contenthash].js',
        chunkFilename: '[id].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        cacheCompression: true,
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime'],
                    },
                },
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                mimetype: 'image/svg+xml',
                scheme: 'data',
                type: 'asset/resource',
                generator: {
                    filename: 'icons/[hash].svg',
                },
            },
            {
                test: /\.(sa|sc|c)ss$/, // SASS AND CSS
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [AutoPrefixer()],
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
        ],
    },
};

型

node.js

来源：https://stackoverflow.com/questions/74978943/webpack-does-not-remove-boilerplate-from-htmlwebpackplugin-under-development

1条答案

按热度按时间

kxeu7u2r1#

从使用module.rules语法设置加载器文档中，我们知道：
然而，这也意味着在下面的示例中，webpack将使用html-loader作为模板。这将导致html缩小，并且还将禁用ejs/lodash回退加载器。
如果您在module.rules中使用html-loader，它将禁用html-webpack-plugin的ejs/lodash回退加载器。没有模板引擎来处理<%= %>标记。这就是为什么它仍然留下<%= htmlWebpackPlugin.tags.headTags %>。
解决方案：在HTML模板中使用html-loader内联，如下所示

require('html-loader!./partial.html').default

字符串
因此html-webpack-plugin可以使用ejs/lodash模板引擎来处理模板特殊的<%= %>标签，我们也可以使用html-loader来处理HTML模板的其他部分。
例如：
项目结构：

$ tree -L 2 -I node_modules
.
├── dist
│   ├── 55b19870aff2e53d1fb1.png
│   ├── index.html
│   └── main.acd85cb0428d8156db50.js
├── package-lock.json
├── package.json
├── src
│   ├── body.html
│   ├── index.html
│   ├── index.js
│   └── logo.png
└── webpack.config.js

2 directories, 10 files

型
src/index.html：

<html lang="en">
    <head>
        <%= htmlWebpackPlugin.tags.headTags %>
    </head>

    <%= require('html-loader!./body.html').default %>
</html>

型
src/body.html：

<body>
    <img
        src="./logo.png"
        alt="logo"
    />
</body>

型
webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: false,
        }),
    ],
    output: {
        clean: true,
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            // {
            //  test: /\.html$/i,
            //  loader: 'html-loader',
            // },
        ],
    },
};

型
构建日志：

> webpack

assets by status 52.8 KiB [cached] 2 assets
asset index.html 163 bytes [emitted]
./src/index.js 37 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 300 ms

型
产出
dist/index.html：

<html lang="en">
    <head>
        <script
            defer="defer"
            src="main.acd85cb0428d8156db50.js"
        ></script>
    </head>
    <body>
        <img
            src="55b19870aff2e53d1fb1.png"
            alt="logo"
        />
    </body>
</html>

型
如果我们在module.rules中使用html-loader，dist/index.html的输出将是：

<html lang="en"><head> <%= htmlWebpackPlugin.tags.headTags %> </head> <%= require('html-loader!./body.html').default %> </html>

型
软件包版本：

"devDependencies": {
  "html-loader": "^4.2.0",
  "html-webpack-plugin": "^5.5.3",
  "webpack": "^5.80.0",
  "webpack-cli": "^5.0.2",
  "webpack-dev-server": "^4.15.1"
}

型

赞(0）回复(0）举报 2023-08-04

我来回答

NodeJS Webpack不会从开发中的HtmlWebpackPLugin中删除样板文件

1条答案

相关问题

热门标签

最新问答