Question

使用pug-loader如何使所有的哈巴狗/玉石文件可以访问。例如，在Express应用程序中，我可以这样做：

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

并且变量assetPath将在所有jade文件中可用。但是对于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" )

在所有pug文件中使变量可访问

1 个答案: