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
|
|||
|
|
```
|