Как внедрить переменные Webpack DefinePlugin в немодульные скрипты - PullRequest
Новая
       8

Как внедрить переменные Webpack DefinePlugin в немодульные скрипты

0 голосов
/ 05 марта 2020

У меня следующая проблема:

Я использую DefinePlugin для определения некоторых переменных в модулях. js. Это нормально работает в js модулях

Однако мое многостраничное приложение загружает локальный скрипт ( custom. js) внутри <HEADER> ТЕГ. Этот скрипт является стандартным javascript (не модуль), используя одну из переменных, определенных в DefinePlugin. Это. js, который должен быть загружен на каждой странице приложения.

По какой-то причине эта переменная WEB_CONTEXT не интерполируется Webpack в процессе BUILD.

Я предполагаю, что причина так как он не распознается как зависимость.

Конфигурация Webpack. js: 

  new webpack.DefinePlugin({
        'WEB_CONTEXT': 'myapp/main'   
    );

Глобальный скрипт загружается так:

<script src="./src/js/custom.js"></script>

custom. js

 $(function () {

     // Compiled file incorrectly shows:
        const myPath = `${WEB_CONTEXT}/resources/images`;

     // Instead of:
        const myPath = `myapp/main/resources/images`;

    });
});

Вопрос: Есть ли в Webpack возможность сделать переменную WEB_CONTEXT ТАКЖЕ доступно для таких скриптов, как custom. js (не импортируется, но загружается через?

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

webpack.config. js

entry : {
    main: './path/to/my/entry/file.js',
    custom: './path/to/custom.js'
}

И в разделе плагинов: 

new HtmlWebpackPlugin({
                template: `./${ruta}`,
                inject: true,
                chunks: ['main', 'custom'], // <-Added custom chunk here.
                filename: `${fileName}.html`,
                templateParameters: {
                    WEB_CONTEXT: basePath
                  }
              });
0 голосов
/ 06 марта 2020

Webpack «работает» только с файлами, которые являются частью дерева зависимостей, которое начинается с файла ввода.

Если ваш файл custom.js не находится внутри этого дерева, webpack не будет коснитесь его.

Вы можете добавить его по требованию или добавить как дополнительную запись в свое приложение. 

//webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
    custom: './path/to/custom.js'
  }
};
...