《玩转webpack》 第二章 基础篇: webpack 基础用法

• 语言: 中文（简体）
• 格式: .pdf
• 来源: github.com/cpselvis

摘要

文档介绍了Webpack的基础用法，包括Loaders用于扩展支持文件类型，Plugins用于添加功能，Output配置输出文件，Mode设置构建环境，以及Entry指定打包入口。文档还提到了热更新工具如webpack-dev-server和webpack-dev-middleware的使用，并通过示例代码展示了配置和使用方法。

AI总结

### 《玩转webpack》第二章总结：Webpack基础用法

#### 核心概念
1. **Loaders**
- 作用：扩展Webpack对文件类型的支持，将文件转换为模块并加入依赖图。
- 常见Loader：
- `babel-loader`：转换ES6+语法
- `css-loader`：加载和解析CSS文件
- `less-loader`：将Less转换为CSS
- `file-loader`：打包图片、字体等资源
- `raw-loader`：以字符串形式导入文件

2. **Plugins**
- 作用：扩展Webpack功能，完成额外任务（如文件压缩、生成HTML等）。
- 常见Plugin：
- `HtmlWebpackPlugin`：生成HTML文件承载打包结果
- `UglifyjsWebpackPlugin`：压缩JS代码
- `ZipWebpackPlugin`：生成ZIP包

3. **Output**
- 作用：指定打包输出文件的名称和路径。
- 示例：

     module.exports = {
       output: {
         filename: 'bundle.js'
       }
     };

4. **Mode**
- 作用：指定构建环境，可选值为`production`（生产模式，默认）、`development`（开发模式）、`none`（无优化）。
- 示例：

     module.exports = {
       mode: 'production'
     };

5. **Entry**
- 作用：指定Webpack的打包入口文件。
- 示例：

     module.exports = {
       entry: {
         app: './src/app.js',
         adminApp: './src/adminApp.js'
       }
     };

6. **热更新工具**
- `webpack-dev-server`：支持实时更新，提升开发效率。
- `webpack-dev-middleware`：适用于灵活定制场景，常与Express框架结合使用。

#### 总结
Webpack通过Loaders扩展文件支持，通过Plugins完成额外功能，通过Output、Mode、Entry配置打包行为，最终生成高效的构建结果。热更新工具则极大提升了开发体验。