配置 Webpack 输出包

Question

我是使用 Webpack 进行 React 开发的新手，已经按照 tutorial article 设置了样板。

我了解了 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 中的文件）并使用babel 将它们编译为标准JS。然后它抓取所有.html 文件并使用html-loader 创建一个包含捆绑包的html 文件。 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 中，“规则”对象的键定义为test，以指示要捆绑的文件类型。 test: /\.js$/, & test: /\.html$/ "test" 是任意值还是默认的 webpack 配置键。

我正在查看有关 webpack 配置的 these 文档，但语法与此处显示的非常不同。

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 是默认的 webpack 配置键，它指定加载器文件类型支持，如 html-loader。