Variable in allen Mops-Dateien zugänglich machen

Question

Mit pug-loader Wie kann ich einige Variablen für alle Mops/Jade-Dateien zugänglich machen. Zum Beispiel in Express App konnte ich tun:

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

und die Variable assetPath würde in allen Jade-Dateien zur Verfügung. Mit Webpack kann ich das nicht machen.

In meinem webpack.config.js ich folgende versucht, aber konnte nicht arbeiten:

{ 
    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

Aus meiner Erfahrung, haben Sie zwei Möglichkeiten:

• Verwendung pug-html-loader statt;
• Wenn Sie das Plugin HtmlWebpackPlugin verwenden, fügen Sie seiner Konfiguration benutzerdefinierte Eigenschaften hinzu. Sie werden über alle Mops-Vorlagen zugänglich sein.

Bitte nehmen Sie einen Blick auf die detaillierte answer die zweite und die ersten Optionen betreffen.

Hier sind auch das Konfigurationsbeispiel für die zweite Option:

pug Regel:

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

HtmlWebpackPlugin Optionen:

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

index.pug Vorlage:

- const production = self.htmlWebpackPlugin.options.production 

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