HtmlWebpackPlugin 将 bundle.[hash].js/css 加载到基本树枝文件中答案

【问题标题】：HtmlWebpackPlugin load bundle.[hash].js/css into base twig fileHtmlWebpackPlugin 将 bundle.[hash].js/css 加载到基本树枝文件中
【发布时间】：2020-01-06 09:23:25
【问题描述】：

我的 webpack.config.js 中有两个条目。一个用于 JS，一个用于 SCSS。我可以在开发和产品模式下运行。如果我创建一个生产版本，我会得到以下文件：index.html、main[hash].js、main[hash].css。在 index.html 中，我有链接和脚本标记以及文件的 src。如何在部署应用程序时加载的base.twig 文件中加载这些链接和脚本标签？在开发过程中，它会从base.twig 加载main.js，并在该文件中包含所有内容。

base.twig

<script src="assets/main.js"></script>

文件夹结构：

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="main.7a67bd4eae959f87c9bc.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="main.7a67bd4eae959f87c9bc.js"></script></body>
</html>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
    const devMode = options.mode === 'development';

    return {
        mode: (devMode) ? 'development' : 'production',
        watch: devMode,
        devtool: "source-map",
        entry: [
            './resources/javascript/index.js',
            './resources/sass/app.scss'
        ],
        output: {
            path: path.resolve(__dirname, 'public/assets'),
            filename: devMode ? '[name].js' : '[name].[hash].js'
        },

        module: {
            rules: [
                {
                    test:   /\.twig/,
                    loader: 'twig-loader'
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        {
                            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: "css-loader",
                        },
                        {
                            loader: "postcss-loader"
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                implementation: require("sass")
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: 'images'
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|ttf|otf|eot)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: 'fonts'
                            }
                        }
                    ]
                }
            ]
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: devMode ? '[name].css' : '[name].[hash].css',
            }),
            new BrowserSyncPlugin({
                proxy: 'https://dev.identity/oauth/authorize?response_type=code&client_id=1c9e2b58-2d01-4c92-a603-c934dfa9bc78&redirect_uri=https://localhost/hooray&state=aaaaa&code_challenge=12345678901234567890123456789012345678901123&code_challenge_method=plain&resource=https://cloud.ctdxapis.io&scope=cloud:my-profile'
            }),
            new CopyPlugin([
                { from: './resources/images', to: './images' }
            ]),
            new HtmlWebpackPlugin({

            }),
        ]
    };
};

更新结构：

【问题讨论】：

标签： webpack twig assets webpack-html-loader

【解决方案1】：

您可以提供HTMLWebpackPlugin 的templateContent 配置属性以生成您的assets.twig 文件

new HtmlWebpackPlugin({
  templateContent: function(params) {
    return `
    {% block jsAssets %}
      ${params.htmlWebpackPlugin.files.js.map(
        file => `<script src="${file}"></script>`,
      )}
    {% endblock %}

    {% block cssAssets %}
      ${params.htmlWebpackPlugin.files.css.map(
         file => `<link rel="stylesheet" type="text/css" href="${file}">`,
       )}
    {% endblock %}`;
  },
  filename: '../../resources/templates/assets.twig',
  inject: false, // prevents from the plugin to auto-inject html tags
});

然后在您的base.twig 中，只需使用blocks method 指定渲染资源的位置。

{{ block("jsAssets", "assets.twig") }}
{{ block("cssAssets", "assets.twig") }}

【讨论】：

感谢您的提示。我得到了使用树枝装载机的部件，但它抱怨base.twig 中的@include header 和@include footer。所以我尝试了第二个选项，创建一个空树枝文件并将其包含在base.twig 中。这让我想到，它将文件输出到资产目录中。作为index.html。这仍然可以包含在树枝文件中吗？我发现的第二件事是；我有多个条目。 scss 和 js 应该包含在页眉和页脚中。所以我猜你必须将输出拆分为多个文件？
您可以通过在filename 属性中指定路径来控制最终文件的保存位置，默认情况下它会转到output 文件夹。
现在它生成一个asset.twig。该文件包含：<head><link href="main.beac92fe341a2e54f2ee.css" rel="stylesheet"></head><script type="text/javascript" src="main.beac92fe341a2e54f2ee.js"></script> 有没有办法将main.css 和main.js 拆分为两个单独的文件？
您为什么要这样做？ HTMLWebpack 插件有一些可能支持它的插件，可能使用块...github.com/jantimon/html-webpack-plugin
因为您在页脚中加载脚本，在页眉中加载样式。