Webpack 不会从正在开发的 HtmlWebpackPLugin 中删除样板

问题描述 投票：0回答：1

我拥有以下页面：

  1. 关于
  2. 联系方式
  3. 家
  4. 投资组合

这些页面是“模板”，仅此而已，我在其中注入了index.js和index.scss的头部，以及所有相同的标题、目标等。

但是在开发模式下，还是留下了

<%= htmlWebpackPlugin.tags.headTags %>

HTML 模板页面示例:

<html lang="en">

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

<body>
    X
</body>

</html>

网页包配置：

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',
                    },
                ],
            },
        ],
    },
};
html node.js webpack webpack-5 html-webpack-plugin
1个回答
0
投票

从使用

module.rules
语法文档设置加载程序，我们知道：

但这也意味着在下面的示例中，webpack 将使用 

html-loader
作为您的模板。这将导致 html 缩小，并且还会禁用 ejs/lodash 后备加载器。

您在 

html-loader
中使用 
module.rules
，它将禁用 
html-webpack-plugin
的 ejs/lodash 后备加载器。没有模板引擎来处理 
<%= %>
标签。这就是为什么它仍然离开
<%= htmlWebpackPlugin.tags.headTags %>
。

解决方案：在 HTML 模板中使用 

html-loader
inline，如下所示

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>

如果我们在

html-loader
中使用
module.rules
，
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"
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.