HtmlWebpackPlugin загружает пакет. [Hash] .js / css в базовый файл ветки - PullRequest
Новая
       37

HtmlWebpackPlugin загружает пакет. [Hash] .js / css в базовый файл ветки

0 голосов
/ 06 января 2020

У меня есть две записи в моем webpack.config. js. Один для JS и один для S CSS. Я могу работать в режиме разработки и продукта. Если я создаю производственную сборку, я получаю следующие файлы: index. html, main [hash]. js, main [hash]. css. В индексе. 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({

            }),
        ]
    };
};

Обновленная структура: enter image description here

1 Ответ

1 голос
/ 06 января 2020

Вы можете предоставить templateContent свойство config 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") }}
...