Webpack 是什么？
Webpack 是一个现代 JavaScript 应用的静态模块打包器。它分析项目结构，找到依赖关系，把它们打包成适合浏览器使用的文件。
安装
1
| npm install webpack webpack-cli --save-dev
|
基本配置
创建 webpack.config.js：
1
2
3
4
5
6
7
8
9
| const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
|
加载器 (Loaders)
处理非 JS 文件。
1. CSS 加载器
1
| npm install css-loader style-loader --save-dev
|
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
|
2. Babel 加载器
转换 ES6+ 代码。
1
| npm install babel-loader @babel/core @babel/preset-env --save-dev
|
1
2
3
4
5
6
7
8
9
10
| {
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
|
3. 图片加载器
1
| npm install file-loader --save-dev
|
1
2
3
4
| {
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
|
插件 (Plugins)
扩展 Webpack 功能。
1. HtmlWebpackPlugin
自动生成 HTML 文件。
1
| npm install html-webpack-plugin --save-dev
|
1
2
3
4
5
6
7
8
9
10
| const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
|
2. CleanWebpackPlugin
清理 dist 目录。
1
| npm install clean-webpack-plugin --save-dev
|
1
2
3
4
5
| const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin()
]
|
开发服务器
1
| npm install webpack-dev-server --save-dev
|
1
2
3
4
5
6
7
| module.exports = {
devServer: {
contentBase: './dist',
port: 3000
}
};
|
在 package.json 中添加：
1
2
3
4
| "scripts": {
"start": "webpack serve --open",
"build": "webpack"
}
|
代码分割
1
2
3
4
5
6
7
8
| module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
|
总结
Webpack 配置灵活但复杂。从基础开始，逐步添加功能。推荐看官方文档和示例项目。