1

我正在尝试使用 webpack看起来.pug非常基本的东西：使用 Javascript 包含和.scss文件，import并让编译导出相应的.htmland.css和extract-loaderand file-loader。

为了便于重现/演示，我在这里创建了一个仓库：https ://github.com/brianmhunt/broken--pug-loader

最小的 webpack 配置非常简单，即：

const path = require('path')

module.exports = {
  output: { filename: 'app.js' },
  entry: path.join(__dirname, 'index.js'),
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          { loader: 'file-loader', options: { name: 'index.html' } },
          'extract-loader',
          'html-loader',
          'pug-html-loader'
        ] },
      {
        test: /\.scss$/,
        use: [
          { loader: 'file-loader', options: { name: 'main.css' } },
          'extract-loader',
          'css-loader',
          'sass-loader'
        ] }
    ]
  },
}

这些文件设置/包含为：

entry: index.js
  import 'one.pug'
    import three.pug
  import 'two.pug'

  import 'abc.scss'
     @import 'ghi.scss'
  import 'def.scss'

只有来自one.pug和three.pug结束的内容index.html，并且只有abc和ghi，css所以看起来第二个文件被extract-loader.

在其他选项中，我尝试了，concat-loader但我的实验没有产生任何有用的结果。

要复制问题：

$ git clone git@github.com:brianmhunt/broken--pug-loader.git
$ yarn install
$ yarn run webpack --mode=production
4

1 回答 1

1

使用include three.puginone.pug代替importor require。对于资源使用类似 img(src="./img/image.png") 的东西，webpack 会解决这个问题。我为 png 添加了一个文件加载并测试了它然后将 .png 文件输出到 dist 并src="d41d8cd98f00b204e9800998ecf8427e.png"正确设置。

然后在你webpack.config的入口点只是覆盖 index.html 两次，所以你需要做类似的事情

  {
    test: /one\.pug$/,
    use: [
      { loader: 'file-loader', options: { name: 'index.html' } },
      'concat-loader',
      'extract-loader',
      'html-loader',
      'pug-html-loader'
    ] },
  {
    test: /two\.pug$/,
      use: [
        { loader: 'file-loader', options: { name: 'index2.html' } },
        'concat-loader',
        'extract-loader',
        'html-loader',
        'pug-html-loader'
      ] },

可以简化为

{ loader: 'file-loader', options: { name: '[name].html' } }, 对于所有文件。

对于 css 文件也是如此。

https://github.com/cwg999/broken--pug-loader/tree/stackoverflow/cwg999-response

于 2018-06-15T17:43:00.370 回答