すべてのpugファイルで変数にアクセスできるようにする

Question

を使用するpug-loaderを使用すると、すべてのpug/jadeファイルに簡単にアクセスできます。

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

私の経験から、あなたは2つのオプションがあります。

• 代わりに使用pug-html-loaderを。
• HtmlWebpackPluginプラグインを使用している場合は、設定にカスタムプロパティを追加してください。それらはすべてのpugテンプレートを通してアクセス可能です。

、第2および第1のオプションに関する詳細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")