Webpack 4 + pug/sass extract/file-loaders 不适用于多个导入

Question

我正在尝试一些 看起来 非常基本的 webpack：包含 .pug 和 .scss 文件以及 import 来自 Javascript 并让编译导出相应的 .html 和 .css 以及 extract-loader 和 file-loader.

为了方便 reproduce/demonstrate，我在此处创建了一个存储库：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'
        ] }
    ]
  },
}

文件设置 up/included 为：

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

Answer 1

在 one.pug 中使用 include three.pug 而不是 import 或 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/Whosebug/cwg999-response

Webpack 4 + pug/sass extract/file-loaders 不适用于多个导入

Webpack 4 + pug/sass extract/file-loaders not working with multiple imports

webpack

sass-loader

webpack-4

pug-loader