javascript - 配置 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 创建一个包含 bundle 的 html 文件。 HtmlWebPackPlugin 在这里实现。模式指示创建 bundle 的开发版本。

我的文件夹结构如下:

- /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 配置键。

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

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。