配置Webpack输出捆绑包

我刚开始对Webpack的开发做出反应,它通过以下方式设置了样板文件 tutorial article .

我了解Webpack的工作原理,并能与本文一起使用,但很难理解我的特定功能。 webpack.config.js 正在创建它所做的文件和捆绑包,以及如何修改这些文件和捆绑包以实现某些自定义功能。

web包.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 文件(不包括节点模块中的文件)并使用babel将其编译为标准JS。然后它抓住了所有 .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. 在哪表明 /距离 成为项目的根。假设我想把目录命名为 foo 把两层放在上面( ../../foo/ )
3. 在 web包.config.js “rules”对象的键定义为 test 指示要捆绑哪些文件类型。 test: /\.js$/, &安培; test: /\.html$/ 是“测试”任意值还是默认的Webpack配置键。

我在看 these 关于Webpack配置的文档,但是语法与此处显示的非常不同。