在 Webpack 中,如何配置 loader 和 plugin
时间: 2024-05-11 20:14:56 浏览: 7
?在 Webpack 中,我们可以在配置文件中使用 module.rules 数组来配置 loader,如下所示:
```javascript
module.exports = {
// ... 其他配置 ...
module: {
rules: [
{
test: /\.jsx?$/, // 匹配文件类型
exclude: /node_modules/, // 排除目录
use: {
loader: "babel-loader", // 使用的 loader
options: {
presets: ["@babel/preset-env", "@babel/preset-react"], // 具体的 loader 配置选项
},
},
},
],
},
};
```
对于 plugin 的配置,我们可以直接在配置对象中添加 plugins 数组,如下所示:
```javascript
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// ... 其他配置 ...
plugins: [
new HtmlWebpackPlugin({
title: "My App",
template: "./src/index.html",
}),
],
};
```
这里使用了 HtmlWebpackPlugin 插件来自动生成 HTML 文件。