HtmlWebpackPlugin加载包。[哈希] .js / css到基本树枝文件中

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

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

base.twig

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

文件夹结构：

enter image description here

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 distribution webpack-html-loader
1个回答
0
投票

您可以依次提供template的template配置属性，以指定它使用HTMLWebpackPlugin文件作为模板。

base.twig
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.