Webpack 是一款功能强大的 JavaScript 模块打包工具，用于将前端项目中的各种资源（如 JavaScript、CSS、图片等）打包整合到一起。以下是具体的 webpack 配置步骤，以实现打包 JavaScript 模块，并确保配置具有可扩展性和可维护性。
1. 初始化项目
在使用 Webpack 打包前，先初始化项目并安装必要的依赖。
mkdir my-webpack-project
cd my-webpack-project
npm init -y
npm install webpack webpack-cli --save-dev
2. 创建文件结构
建议的目录结构如下：
my-webpack-project/
├── dist/ # 构建输出文件夹
├── src/ # 源代码文件夹
│ └── index.js # JavaScript 入口文件
├── webpack.config.js # Webpack 配置文件
└── package.json # 项目配置文件
3. Webpack 基础配置
在项目根目录下创建 webpack.config.js 文件。
const path = require('path');
module.exports = {
// 入口文件
entry: './src/index.js',
// 打包输出配置
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: 'bundle.js', // 输出的文件名
clean: true // 清理旧文件
},
// 模式设置（可选：'development' 或 'production'）
mode: 'development', // 开发模式，未压缩，便于调试
// 模块（loaders）配置
module: {
rules: [
{
test: /\.m?js$/, // 匹配 .js 和 .mjs 文件
exclude: /node_modules/, // 排除依赖文件夹
use: {
loader: 'babel-loader', // 使用 Babel 编译 JavaScript 文件
options: {
presets: ['@babel/preset-env'] // 浏览器兼容性处理
}
}
}
]
},
// 开发工具配置（source map）
devtool: 'inline-source-map',
// 本地开发服务器（可选）
devServer: {
static: path.join(__dirname, 'dist'), // 用于加载静态文件
port: 3000, // 本地服务器端口
open: true // 启动时自动打开浏览器
}
};
然后安装所需的附加依赖，比如 babel-loader 和 @babel/preset-env：
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install webpack-dev-server --save-dev
4. 多环境模式配置
为了实现更好的扩展性，通常会根据环境（开发或生产）分离 webpack 的配置文件。
4.1 创建通用配置 webpack.common.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
4.2 创建开发环境配置 webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
port: 3000,
open: true
}
});
4.3 创建生产环境配置 webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
optimization: {
usedExports: true, // Tree-shaking
splitChunks: {
chunks: 'all' // 代码分割
}
}
});
同时安装 webpack-merge：
npm install webpack-merge --save-dev
4.4 修改 package.json 中的脚本
"scripts": {
"start": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}
5. 扩展功能（可选）
根据项目需求，添加更多功能：
5.1 加载 CSS
安装相关模块：
npm install style-loader css-loader --save-dev
在 rules 中添加配置：
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
5.2 加载图片
安装相关模块：
npm install file-loader --save-dev
添加配置：
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
type: 'asset/resource'
}
]
}
5.3 支持 TypeScript
安装相关模块：
npm install ts-loader typescript --save-dev
添加配置：
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
6. 总结
通过上面的配置，你已经完成了一个 Webpack 环境的搭建，并且根据环境分离了配置文件，以提升可维护性和扩展性。如果后续需要新增功能，可以通过加载不同的 Loaders 和 Plugins 来满足需求。记得遵循模块化和单一职责原则，避免配置文件过于复杂。
