Как применять разные загрузчики в зависимости от входа? - PullRequest
Новая
       5

Как применять разные загрузчики в зависимости от входа?

0 голосов
/ 24 февраля 2019

У меня есть конфигурация Webpack с 2 записями: 

const path = require('path');

module.exports = {
  entry: {
    public: './src/public.js',
    admin: './src/adminPanel.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['last 5 years']
                }
              }]
            ]
          }
        }]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

Он создает 2 файла: скрипт для общедоступных страниц и скрипт для панели администратора.Записи импортируют другие файлы JS, включая некоторые общие файлы.Мне нужен общедоступный сценарий для поддержки многих браузеров и сценарий панели администратора для поддержки только самой последней версии Chrome.

Я хочу добиться этого, используя различные настройки browsers в зависимости от записи, чтобы, если файл JS былиспользуется в общедоступной записи, он загружается с одной настройкой, а если в записи администратора используется файл, он загружается с другими настройками.Как это сделать в Webpack 4?

Я знаю, что могу решить мою проблему путем экспорта двух конфигураций Webpack , но мне интересно, как использовать разные загрузчики или настроить параметры загрузчика на основе входного файла.

1 Ответ

0 голосов
/ 24 февраля 2019

Мне нужен публичный скрипт для поддержки многих браузеров и скрипт админ-панели для поддержки только последней версии Chrome.Я хочу добиться этого, используя различные настройки браузеров в зависимости от записи.

babel поддерживает несколько конфигураций для одного каталога (рекурсивно до этого находит файл конфигурации babel до package.jsonнайдено:

Babel загружает файлы .babelrc (и .babelrc.js / package.json # babel) путем поиска в структуре каталогов, начиная с компилируемого «имени файла» (ограниченного приведенными ниже предостережениями)Это может быть полезно, поскольку позволяет создавать независимые конфигурации для подразделов пакета. Источник: babel документы

В настоящее время вы разместили конфигурацию babelв конфигурации вашего веб-пакета, которая применяется для всего проекта. Что вы можете сделать, это удалить конфигурацию babel из вашего веб-пакета, поместить ваши adminPanel.js и public.js в отдельные каталоги, каждый из которых имеет свой собственный .babelrc (или другую конфигурацию babel)файл с разными целями для @babel/presets-env. 

.
├── src
|   ├── admin
|   |   ├── adminPanel.js
|   |   ├── .babelrc
|   |
|   ├── public
|   |   ├── public.js
|   |   ├── .babelrc
|
├── package.json

Ваш ./src/admin/.babelrc может выглядеть так: 

{
    "presets": [["@babel/preset-env", {
        "targets": "chrome 70"
    }]]
}

И ваш./src/public/.babelrc: 

{
    "presets": [["@babel/preset-env", {
        "targets": "last 5 years"
    }]]
}

Я только что попробовал это со следующим кодом в ./src/admin/adminPanel.js и ./src/public/public.js

[1, 2, 3].map(num => `number ${num}`)

let [x, y, z] = [2, 4, 6]

, которые webpack и babel имеютпреобразован в 

// ./dist/admin.js
[1, 2, 3].map(num => `number ${num}`);
let [x, y, z] = [2, 4, 6];

и 

// ./dist/public.js
[1, 2, 3].map(function (num) {
  return "number ".concat(num);
});
var x = 2,
    y = 4,
    z = 6;

Надеюсь, это поможет.

...