Загрузчики веб-пакетов и включают

Я новичок в webpack, и я пытаюсь понять загрузчики, а также его свойства, такие как test, loader, include и т.д.

Вот пример фрагмента webpack.config.js, который я нашел в google.

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: {
          presets: ['es2015']
        }
      },
    ]
}

Я прав, что тест:/.js$/будет использоваться только для файлов с расширением .js?
Погрузчик: 'babel-loader', это загрузчик, который мы устанавливаем с помощью npm
Включить: у меня есть много вопросов по этому поводу. Правильно ли, что все, что мы помещаем внутри массива, будет переполнено? Это означает, что index.js, config.js и все *.js файлы в lib, app и src будут переданы.
Другие вопросы по включению: Когда файлы передаются, файлы *.js объединяются в один большой файл?
Я думаю, что исключение самоочевидно. Это не будет передано.
Что делает запрос: {presets: ['es2015']} do?

Ответы

Ответ 1

В конфигурации webpack для конфигурации есть несколько вещей, важными являются

entry - может быть массив или объект, определяющий точку входа для объекта, который вы хотите расслоить, может быть js, поскольку здесь сказано, что это делается только для /.js$. Ваше приложение, если имеет несколько точек входа, использует массив.
include - определяет набор путей или файлов, в которых импортируемые файлы будут преобразованы загрузчиком.
exclude является самоочевидным (не преобразовывайте файл из этих мест).
output - окончательный пакет, который вы хотите создать. если вы укажете, например,

вывод: { filename: "[name].bundle.js", поставщик: "реагировать" }

Затем ваши файлы приложения js будут связаны как main.bundle.js и будут реагировать в файлах vendor.js. Это ошибка, если вы не используете обе страницы html.

Надеюсь, что это помогло

Ответ 2

Эта документация помогла мне лучше понять. Похоже, что это для webpack 1, но по-прежнему применяется.

https://webpack.github.io/docs/configuration.html#module-loaders

Погрузчики

Массив автоматически применяемых загрузчиков.

Каждый элемент может иметь следующие свойства:

test: Условие, которое должно быть выполнено

исключить: Условие, которое не должно выполняться

include: Массив путей или файлов, в которых импортированные файлы будут преобразованы загрузчиком

загрузчик: Строка "!" раздельные погрузчики

загрузчики: Массив загрузчиков как строка

Этот пример помог мне понять, что происходит. Похоже, вы используете либо включить, либо исключить, но не оба. Тест - это условие, применяемое ко всем файлам. Поэтому, если вы включаете папку, каждый файл должен пройти тестовое условие. Я не проверял это, но, основываясь на примере, представленном документацией, похоже, что так оно и работает.

    module: {

      rules: [
        {
          // "test" is commonly used to match the file extension
          test: /\.jsx$/,

          // "include" is commonly used to match the directories
          include: [
            path.resolve(__dirname, "app/src"),
            path.resolve(__dirname, "app/test")
          ],
          // "exclude" should be used to exclude exceptions
          // try to prefer "include" when possible

          // the "loader"
          loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
        }
      ]

    }

Ответ 3

1) Правильно.

2) Правильно.

3) Правильно.

4) Я не уверен. Мой файл webpack.config.js включает в себя выходной ключ и объединяет его в один файл:

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
}

5) Правильно.

6) Это говорит babel-загрузчику, какой вид трансляции вы хотите выполнить, а также другие параметры компиляции. Так, например, если вы хотите, чтобы он также переместил jsx, а также результаты кэша для повышения производительности, вы изменили бы его на:

query: {
    presets: ['react', 'es2015'],
    cacheDirectory: true
}