配置 Webpack 的 6 种方法
Webpack是一个构建工具，用于将原本并非为浏览器执行而编写的代码转换为可在 Web 浏览器中执行的代码。借助特定的插件，Webpack 可以管理多种类型的代码，例如 JavaScript、TypeScript 和 Rust 生成的 WebAssembly。
Webpack 也提供了一些插件，用于编译、压缩、合并、分块和打包代码。然而，Webpack 的设计初衷并非用于执行诸如代码检查、构建或测试等任务。为此，可以使用Grunt、Gulp或npx等任务运行器。
为了管理 webpack 的功能，必须对其进行配置。以下是六种不同的 webpack 配置方式。
1. 零配置
从 webpack 版本 4 开始，不再需要指定配置。默认情况下，webpack 假定代码从 `<filename>` 开始src/index.js，并打包到 `<filename>` dist/main.js。这非常方便，提倡约定优于配置，但并没有充分发挥 webpack 的全部潜力。
如果没有配置，webpack 就不知道代码应该压缩以加快执行速度，还是应该打包成 source map 以便更好地跟踪错误。webpack 会发出以下警告来表达它的困惑：
配置警告
未设置“mode”选项，webpack 将回退到“production”模式。
将“模式”选项设置为“开发”或“生产”，以启用每个环境的默认值。
您也可以将其设置为“none”以禁用所有默认行为。了解更多信息：https://webpack.js.org/configuration/mode/
让我们来看看如何配置 webpack。
2. 命令行界面
要查看所有可用于通过命令行界面配置 webpack 的命令和选项，您可以运行 `webpack --config` webpack --help。该命令将显示参数列表及其使用方法。以下执行模拟了 webpack 的默认（零配置）行为：
webpack --entry=./src/index.js --output-path=./dist --output-filename=main.js
如您所见，CLI 配置可能会变得非常冗长。为了尽量减少编写工作量，上述命令也有一个简写版本：
webpack ./src/index.js -o ./dist
简化的表示法牺牲了可理解性，因此我们将在下一步研究配置文件。
3. CommonJS 配置文件
Webpack 可以读取配置文件。默认情况下，webpack.config.js使用名为 `webpack.conf` 的文件。您可以使用npx webpack init命令创建该文件，也可以自己编写：
webpack.config.js
const path = require("path");
const config = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.(js|jsx)$/i,
loader: "babel-loader"
}
]
},
output: {
path: path.resolve(__dirname, "dist")
},
plugins: []
};
module.exports = config;
该配置使用 CommonJS 模块语法，并包含 `<module>` 和require`<module> module.exports`。请确保您的 ` package.json<module>` 没有定义 `<module>` "type": "module"，否则您将收到以下错误：
[webpack-cli] ReferenceError: require 未定义
配置文件也应该位于项目根目录下。
4. ESM配置文件
如果您的package.json配置文件中指定了"type": "module"ECMAScript 模块，并且您想要使用 ECMAScript 模块，那么您也可以对 webpack 配置进行现代化改造：
webpack.config.js
import path from "path";
const config = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.(js|jsx)$/i,
loader: "babel-loader"
}
]
},
output: {
path: path.resolve("./dist")
},
plugins: []
};
export default config;
如果您已安装 TypeScript，那么启用checkJs后，TypeScript 编译器还允许您从 JavaScript 文件中检查 Webpack 配置。您只需在配置文件的第一行添加 @ts-check 编译指示和@type 引用即可：
webpack.config.js
// @ts-check
const path = require('path');
/** @type {import('webpack').Configuration} */
const config = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.(js|jsx)$/i,
loader: "babel-loader"
}
]
},
output: {
path: path.resolve("./dist")
},
plugins: []
};
export default config;
5. TypeScript 配置文件
对于喜欢使用 TypeScript 的用户来说，webpack 提供了使用 TypeScript 编写的配置文件的可能性。
Webpack v5 已经包含了 TypeScript 定义，所以你不需要安装@types/webpack，但是你需要安装typescript、ts-node和@types/node。
由于该扩展名.ts与标准扩展名不符.js，因此必须通过参数告知 webpack --config：
webpack --config webpack.config.ts
您还需要确保您的“规则”和“解析”定义的测试模式包含 TypeScript 扩展：
webpack.config.ts
import path from "path";
import { Configuration } from "webpack";
const config: Configuration = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.[tj]sx?$/,
loader: "babel-loader"
}
]
},
output: {
path: path.resolve(__dirname, "./dist")
},
plugins: [],
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
}
};
export default config;
☝️ 因为示例 webpack 配置加载了Babel，所以我们仍然可以指向 JavaScript 入口文件，因为 Babel 可以同时使用 JavaScript 和 TypeScript 代码。
⚠️ 请注意，TypeScript 配置文件不能与 ESM 一起使用（请参阅webpack.config.ts 中的 ESM 不受支持）。
6. 节点接口
除了通过 `webpack` 执行之外webpack-cli，webpack 还支持程序化接口。这允许你将前端代码编译到 Node.js 服务器上。以下是一个示例：
import express from "express";
import { webpack } from "webpack";
import webpackConfig, { webappDir } from "../webpack.config.js";
export function useWebpack(app: express.Express) {
const webpackCompiler = webpack(webpackConfig);
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
app.use(webpackDevMiddleware(webpackCompiler));
app.use(webpackHotMiddleware(webpackCompiler));
app.use(express.static(webappDir));
}
除了使用现有webpack.config.js文件之外，您还可以将配置对象传递给webpackAPI。
保持联系🔗
如果你喜欢这篇文章，请在Twitter上关注我或订阅我的YouTube频道。我很想了解你正在制作什么。🙂祝好，Benny
文章来源：https://dev.to/typescripttv/6-ways-to-configure-webpack-5a33