Сделать переменную доступной во всех файлах-мопедах

Question

Использование pug-loader Как сделать доступным доступное для всех файлов мопса/нефрита доступное для vairable. Например, в экспресс-приложение, которое я мог бы сделать:

app.locals.assetPath = path.resolve('public/assets');

и переменная assetPath будет доступна во всех файлах нефрита. Но с webpack я не могу сделать то же самое.

В моей webpack.config.js я попытался следующие, но не мог получить работу:

{ 
    test: /.pug$/, 
    loader: 'pug', 
    query: { 
    root: path.join(__dirname, 'src/app'), 

    /*globals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK 

    /*locals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK 

    /*locals: {assetPath: '/hard/coded/value'}, globals: ['assetPath']*/ //WILL NOT WORK 
    } 

Answer 1

Из моего опыта, у вас есть два варианта:

• использование pug-html-loader вместо;
• Если вы используете плагин HtmlWebpackPlugin, добавьте пользовательские свойства в его конфигурацию. Они будут доступны через все шаблоны мопсов.

Пожалуйста, обратите внимание на детальном answer относительно второго и первого варианта.

Здесь также пример конфигурации для второго варианта:

pug правило:

{ 
    test: /\.pug$/, 
    loader: 'pug-loader', 
    options: { 
    // Use `self` namespace to hold the locals 
    // Not really necessary 
    self: true, 
    }, 
} 

HtmlWebpackPlugin опции:

{ 
    filename: 'index.html', 
    template: 'src/html/index.pug', 
    // Your custom variables: 
    production: (process.env.NODE_ENV === 'production') 
} 

index.pug шаблона:

- const production = self.htmlWebpackPlugin.options.production 

if production 
    link(rel="stylesheet", type="text/css", href="style.css")