1

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

基地.twig

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

文件夹结构：

在此处输入图像描述

索引.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({

            }),
        ]
    };
};

更新结构： 在此处输入图像描述

4

1 回答 1

1

您可以提供templateContent配置属性HTMLWebpackPlugin以生成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 方法来指定渲染资产的位置。

{{ block("jsAssets", "assets.twig") }}
{{ block("cssAssets", "assets.twig") }}
于 2020-01-06T13:53:45.020 回答