Webpack 4 + pug/sass extract/file-loaders не работает с множественным импортом

Я пытаюсь кое-что, что выглядит довольно просто с веб-пакетом: включить файлы .pug и .scss с import из Javascript и заставить компиляцию экспортировать соответствующие .html и .css с extract-loader и file-loader.

Чтобы упростить воспроизведение/демонстрацию, я создал репозиторий здесь: https://github.com/brianmhunt/broken--pug-loader

Минимальная конфигурация веб-пакета довольно тривиальна:

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 [email protected]:brianmhunt/broken--pug-loader.git
$ yarn install
$ yarn run webpack --mode=production

webpack sass-loader webpack-4 pug-loader
person Brian M. Hunt    schedule 13.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

используйте include three.pug в one.pug вместо import или require. для ресурсов используйте что-то вроде img(src="./img/image.png"), webpack решит эту проблему. Я добавил загрузку файла для png и проверил, что он затем выводит файлы .png на дистрибутив и правильно устанавливает 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

person Cody Ｇ    schedule 15.06.2018
comment
Спасибо Коди; Я должен был упомянуть, но существует произвольное количество двух, трех, ..., n файлов pug; Я уверен, что вы согласны с тем, что добавление раздела конфигурации для каждого файла было бы абсурдно неудобным в сопровождении, хрупким и запутанным. ????. Имея это в виду, есть ли способ сделать это? - person Brian M. Hunt; 15.06.2018
comment
Да, просто используйте { loader: 'file-loader', options: { name: '[name].html' } }, - person Cody Ｇ; 15.06.2018
comment
Как объединить эти файлы в один (ожидая сотни...)? - person Brian M. Hunt; 16.06.2018
comment
Если это не отдельные точки входа для html, вам следует просто использовать функцию pug - include, не так ли (аналогично мопсу 1, включая 3)? Также не говорю, что я эксперт в этом, я никогда не заставлял pug-loader работать так, как хотел. - person Cody Ｇ; 18.06.2018
comment
Спасибо Коди. Проблема в том, что у нас есть куча разных, отдельных точек входа в дискретные модули — каждый со своим собственным JS, CSS и HTML; чтобы сделать его управляемым в масштабе, мы хотели бы включить (и удалить) единую точку входа (например, файл index.js), которая включает все зависимости для каждого модуля. Вы могли бы подумать, что это будет тривиально ... и все же мы здесь ???? - person Brian M. Hunt; 18.06.2018
comment
Это немного неясно, так что вы хотите, чтобы require('one.pug') и require('two.pug') на самом деле слились вместе? И причина, по которой вы не хотите делать это в файле main.pug, заключается в том, что это будет в отдельном файле. Я думаю, что есть своего рода загрузчик приложений ... - person Cody Ｇ; 19.06.2018
comment
Да, я попробовал загрузчик concat, но это не помогло. Это тайна. ???? - person Brian M. Hunt; 19.06.2018
comment
Вы можете написать загрузчик пост-скриптов и объединить их все в новый файл и удалить импортированные файлы. Если вы посмотрите на этот загрузчик concat, вы увидите, что это не очень большой плагин... module.exports = function(content) { this.cacheable && this.cacheable(); this.value = content; return content; } - person Cody Ｇ; 20.06.2018
comment
Что-то вроде npmjs.com/package/webpack-concat-plugin может работать, но я не думаю, что это работает для испытаний типа post webpack. - person Cody Ｇ; 20.06.2018
comment
Я перешел к другому дизайну, поэтому система сборки здесь больше не нужна. Я помечаю этот ответ как правильный, потому что считаю, что он содержит все необходимое для всех, кто также сталкивается с этой проблемой. - person Brian M. Hunt; 21.06.2018