webpack.config.js里的内容
时间: 2023-07-06 16:40:22 浏览: 104
webpack.config.js 是 webpack 的配置文件,用于配置 webpack 的各项功能和插件。下面是一个简单的 webpack.config.js 配置文件示例:
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 输出文件夹
filename: 'bundle.js' // 输出文件名
},
module: {
rules: [
{
test: /\.js$/, // 匹配 .js 文件
exclude: /node_modules/, // 排除 node_modules 目录
use: {
loader: 'babel-loader', // 使用 babel-loader 转换 ES6 语法
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/, // 匹配 .css 文件
use: ['style-loader', 'css-loader'] // 使用 style-loader 和 css-loader 加载 CSS 文件
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 自动生成 index.html 文件
template: './src/index.html'
})
]
};
```
该配置文件中主要包含了以下内容:
- 入口文件和输出文件的配置
- 使用 babel-loader 转换 ES6 语法
- 使用 style-loader 和 css-loader 加载 CSS 文件
- 自动生成 index.html 文件的配置
当然,这只是一个简单的示例,实际项目中根据需求会有更多的配置和插件。
阅读全文