配置 Webpack 输出bundle

Question

我是 React 开发的新手，Webpack 按照本教程文章设置了一个样板。

我了解了 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中，"rules"对象的键定义为test，以指示要捆绑的文件类型。test: /.js$/,&test: /.html$/是"test"的任意值或默认的 webpack 配置键。

我正在查看有关 webpack 配置的这些文档，但语法与此处显示的语法大不相同。

Answer 1

1 & 2：

您可以像这样设置输出配置：

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

• 文件名

输出包文件的名称。默认值：主.js

• 路径

  保存输出文件的位置。默认值：/dist

要获得项目的根目录，您必须使用路径！

导入路径：

var path = require('path');

并像这样使用：

path.resolve(__dirname, DIRECTORY_NAME)

3：test 是默认的 webpack 配置键，它指定加载器文件类型支持像html-loader一样。