Использование Webpack'а зависимо` с несколькими файлами на запись - PullRequest
Новая
       58

Использование Webpack'а зависимо` с несколькими файлами на запись

0 голосов
/ 05 августа 2020

В документах webpack указано, что вы можете использовать dependOn в сочетании с массивом файлов для каждой записи. Вот пример, который они дают: 

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types']
  }
};

В моем приложении у меня есть два ресурса c со спецификацией страницы, которые оба зависят от «общего» пакета, поэтому я использую вышеупомянутый подход

ПРИМЕЧАНИЕ: Webpack поддерживает смешивание файлов S CSS и JS через MiniCssExtractPlugin

module.exports = {
  // ...
  
  'entry': {
    'common': [
      `${ASSETS_DIR}/javascript/packs/common.js`,
      `${ASSETS_DIR}/stylesheets/packs/common.scss`
    ],

    'pageOne': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageOne.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageOne.scss`
      ],
      'dependOn': 'common'
    },

    'pageTwo': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageTwo.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageTwo.scss`
      ],
      'dependOn': 'common'
    }

  }
}

Однако я получаю сообщение об ошибке, указывающее, что моя конфигурация неверна: 

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry['pageTwo'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['pageTwo'] should be an array:
      [non-empty string]
      -> A non-empty array of non-empty strings
    * configuration.entry['pageTwo'] should be one of these:
      [non-empty string]
      -> All modules are loaded upon startup. The last one is exported.
    * configuration.entry['pageTwo'] should be one of these:
      non-empty string | [non-empty string]
      -> An entry point with name

Причина, по которой Webpack не нравится этот формат конфигурации?

Вот версии, которые я использую: 

$ cat package.json | grep webpack
    ....

    "webpack-dev-server": "^3.8.2"
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "copy-webpack-plugin": "^5.0.5",
    "webpack": "^4.41.2",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-cli": "^3.3.9"

Спасибо!

1 Ответ

0 голосов
/ 05 августа 2020

Я не знал, что недавно был выпущен Webpack v5. На момент написания этой статьи он все еще находился в стадии бета-тестирования, поэтому я не знал, что документы уже официально перешли на v5.

Глядя на ту же функциональность в v4 docs , похоже, он не поддерживает несколько файлов для каждой записи одинаково.

Итак, ответ - обновить эту функцию до v5.

...