webpack.config.js文件包含了许多配置选项,以下是一些常见的配置选项:
- entry:指定打包的入口文件路径。
- output:指定打包后的输出文件路径和文件名。
- module:定义模块的处理规则,包括loader、解析器等。
- resolve:定义模块的解析规则,包括模块路径、别名等。
- plugins:定义插件,用于扩展Webpack的功能。
- devServer:定义开发服务器的配置,包括端口号、代理等。
- optimization:定义优化选项,包括代码压缩、分离等。
以下是一个简单的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$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080'
}
},
optimization: {
minimize: true
}
};