Question

我正在尝试使用webpack 看起来非常基本的东西：从Javascript中包含.pug和.scss import文件，并让编译导出相应的.html和.css与extract-loader和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

Answer 1

使用include three.pug中的one.pug代替import或require。对于资源使用类似img（src =＆＃34; ./ img / image.png＆＃34;）的东西，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

Webpack 4 + pug / sass提取/文件加载器不使用多个导入

1 个答案: