Настроить выходной пакет Webpack

Question

Я новичок в разработке React с Webpack, настроив шаблон, следуя этой статье .

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

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ],
  mode: 'development'
};  

Я понимаю, что объект rules захватывает все файлы .js (кроме файлов в node_modules) и компилирует их встандартный JS с использованием Babel.Затем он захватывает все файлы .html и создает html-файл, включая пакет, используя html-loader.HtmlWebPackPlugin реализован здесь.Режим указывает на создание разрабатываемой версии пакета.

Моя структура папок выглядит следующим образом:

- /dist (generated by webpack)
    - index.html
    - main.js (webpack bundle)
- /src (created manually)
  - /components
    - components.js (react components)
  - index.html
  - index.js
- .babelrc
- package.json (npm init -y)
- webpack.config.js (manually configured)

Вопросы:

1. Webpack создает каталог /dist и содержащиеся в нем файлыв этом.Где в конфигурации указано, что этот каталог называется "dist", а основной файл комплекта - main.js?
2. Где указано, что /dist будет в корне проекта.Предположим, я хотел, чтобы каталог имел имя foo и поместил его на два уровня вверх (../../foo/)
3. В webpack.config.js у объекта "rules" есть ключи, определенные как test для указания типов файлов для объединения,test: /\.js$/, & test: /\.html$/ «проверить» произвольное значение или конфигурационный ключ веб-пакета по умолчанию.

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

Answer 1

1 & 2:

Вы можете установить параметры вывода следующим образом:

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },

• имя файла

  имявыходного файла пакета. по умолчанию: main.js

• путь

  расположение сохраненных выходных файлов. по умолчанию: / dist

, чтобы получить корень проекта, вы должны использовать путь!

путь импорта:

var path = require('path');

и используйте его следующим образом:

path.resolve(__dirname, DIRECTORY_NAME)

3: test - это ключ конфигурации веб-пакета по умолчанию, и его необходимо указатьподдержка этого типа файлов загрузчика, например html-loader.