119 lines
2.5 KiB
Markdown
119 lines
2.5 KiB
Markdown
# 1. Webpack
|
||
|
||
## 1.1 基础概念
|
||
### 1.1.1 入口（Entry）
|
||
入口起点指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。示例配置如下：
|
||
```javascript
|
||
// webpack.config.js
|
||
module.exports = {
|
||
entry: './src/index.js'
|
||
};
|
||
```
|
||
|
||
### 1.1.2 输出（Output）
|
||
输出配置告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。示例配置如下：
|
||
```javascript
|
||
const path = require('path');
|
||
|
||
module.exports = {
|
||
entry: './src/index.js',
|
||
output: {
|
||
path: path.resolve(__dirname, 'dist'),
|
||
filename: 'bundle.js'
|
||
}
|
||
};
|
||
```
|
||
|
||
## 1.2 加载器（Loaders）
|
||
### 1.2.1 Babel Loader
|
||
用于将 ES6+ 代码转换为浏览器可兼容的 JavaScript 代码。安装和配置示例如下：
|
||
```bash
|
||
npm install --save-dev babel-loader @babel/core @babel/preset-env
|
||
```
|
||
```javascript
|
||
module.exports = {
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /\.js$/,
|
||
exclude: /node_modules/,
|
||
use: {
|
||
loader: 'babel-loader',
|
||
options: {
|
||
presets: ['@babel/preset-env']
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
};
|
||
```
|
||
|
||
### 1.2.2 CSS Loader 和 Style Loader
|
||
用于处理 CSS 文件。安装和配置示例如下：
|
||
```bash
|
||
npm install --save-dev css-loader style-loader
|
||
```
|
||
```javascript
|
||
module.exports = {
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /\.css$/,
|
||
use: ['style-loader', 'css-loader']
|
||
}
|
||
]
|
||
}
|
||
};
|
||
```
|
||
|
||
## 1.3 插件（Plugins）
|
||
### 1.3.1 HtmlWebpackPlugin
|
||
用于生成 HTML 文件，并自动注入打包后的 JavaScript 文件。安装和配置示例如下：
|
||
```bash
|
||
npm install --save-dev html-webpack-plugin
|
||
```
|
||
```javascript
|
||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||
|
||
module.exports = {
|
||
plugins: [
|
||
new HtmlWebpackPlugin({
|
||
template: './src/index.html'
|
||
})
|
||
]
|
||
};
|
||
```
|
||
|
||
### 1.3.2 CleanWebpackPlugin
|
||
用于在每次构建前清理 `dist` 目录。安装和配置示例如下：
|
||
```bash
|
||
npm install --save-dev clean-webpack-plugin
|
||
```
|
||
```javascript
|
||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||
|
||
module.exports = {
|
||
plugins: [
|
||
new CleanWebpackPlugin()
|
||
]
|
||
};
|
||
```
|
||
|
||
## 1.4 开发服务器（Dev Server）
|
||
Webpack Dev Server 提供了一个简单的 Web 服务器，并且能够实时重新加载（Live Reloading）。安装和配置示例如下：
|
||
```bash
|
||
npm install --save-dev webpack-dev-server
|
||
```
|
||
```javascript
|
||
module.exports = {
|
||
devServer: {
|
||
contentBase: './dist',
|
||
open: true
|
||
}
|
||
};
|
||
```
|
||
运行开发服务器的命令：
|
||
```bash
|
||
npx webpack-dev-server --open
|
||
``` |