以下是一个基本的webpack
配置示例,它包括了入口文件、输出配置以及模式设置(开发模式或生产模式)。
const path = require('path');module.exports = (env, argv) => {// 根据传入的参数确定是开发模式还是生产模式const isProduction = argv.mode === 'production';return {// 项目入口文件entry: './src/index.js',// 输出配置output: {// 输出文件名filename: 'bundle.js',// 输出路径path: path.resolve(__dirname, 'dist'),// 在生产模式下添加代码压缩和优化...(isProduction && {optimization: {minimize: true,// 这里可以添加更多的优化配置},}),},// 在开发模式下添加 source maps 帮助调试devtool: isProduction ? false : 'inline-source-map',// 模块配置module: {rules: [{// 处理 JavaScript 文件test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',},{// 处理 CSS 文件test: /\.css$/,use: ['style-loader', 'css-loader'],},// 这里可以添加更多的规则来处理其他类型的文件],},// 插件配置plugins: [// 这里可以添加插件],// 开发服务器配置devServer: {contentBase: './dist',open: true,port: 3000,},};
};
这个配置文件提供了基本的入口、输出以及模块加载配置。它使用了环境变量来判断当前是开发模式还是生产模式,并根据模式配置不同的输出和优化。同时,它包括了对.js
和.css
文件的基本处理,以及开发服务器的配置。这个配置是一个基础,你可以根据自己的项目需求进行扩展和定制。