介绍

Webpack 是用于现代 JS 程序的 静态模块 打包工具。它主要用于将模块化的 JS 文件打包整合在一起，以便使我们的代码能够运行在浏览器中。除了处理打包 JS 文件之外，Webpack 也能够通过 Loader 处理转换其它资源，为我们的开发工作提供了极大的便利。

使用

Webpack 需要在 Node.js 环境下使用，目前 Webpack 已经更新到 webpack 5 版本，其所需的 Node 版本为 10.13.0。

开始

首先创建一个工程文件夹，里面包括 index.html 以及 src 子文件夹下的 index.js 文件。

demo
|- index.html
|- src
   |- index.js

然后执行 npm init，初始化工程文件夹，安装一些必要的 node 依赖包，此时文件夹下会生成 package.json 文件。

demo
|- package.json
|- package-lock.json
|- index.html
|- src
   |- index.js

安装

当工程文件夹初始化完成后，就可以安装 webpack 了，执行 npm install webpack webpack-cli -dev。此时 package.json 文件中会出现一条依赖记录。

"devDependencies": {
   "webpack": "^5.38.1",
   "webpack-cli": "^4.7.2"
}

安装完成后，就可以使用 webpack 相关的功能了。

配置

在安装完成 webpack 相关依赖后，还需要进行部分配置才能使 webpack 正常工作。

• 脚本配置：在 package.json 添加 "script" 脚本配置。

  "scripts": {
    "dev":"webpack serve --open",  //启动开发服务器
    "watch": "webpack --watch",    //监听代码变化以自动重新打包
    "build": "webpack",  //打包代码
  }
  

• 打包配置：新建一个 webpack.config.js 文件，用来设置适合工程的打包配置。

  const path = require('path')
  
  module.exports = {
     entry:'./src/index.js',
     devtool: 'inline-source-map',
     devServer: {
        static: './dist',
     },
     output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
     }
  }
  

相关概念

在上面了解了 webpack 的基本使用方法后，还有一些关于 webpack 的重要概念也需要了解。

chunk

chunk 的含义是 块，表示在 webpack 打包编译过程中生成的一组有依赖关系的代码块，例如：

• 入口 entry 模块的代码
• 通过 import() 动态导入的模块代码
• 使用 splitChunk 拆分的代码

chunk 是在打包过程中产生的，不会输出到打包的结果中。

bundle

bundle 的含义是 包，是由 webpack 对 chunk 进行进一步处理和优化后生成的最终输出文件。每个 chunk 可能包含多个模块，而每个 bundle 仅对应一个入口点和其所依赖的所有模块打包而成。换而言之，bundle 是打包的最终产物。

module

module 的含义是 模块，是由我们直接编写的代码，一个模块可能是一个方法、一个组件、一个页面等。在现代化的前端开发方式下，一个完整的页面应用可能会由多个模块组成，不同的模块会各自实现其特定的功能，它们之间可以进行组合，用以实现更加复杂的功能。

entry

entry 的含义是 入口，表示 webpack 打包的起点，它告诉 webpack 应该从哪个模块开始寻找依赖关系，从而构建其内部的依赖图。

loader

loader 的含义是 解析器，它赋予了 webpack （其自身只能处理 JS 与 JSON 文件）处理其他文件的强大能力，loader 可以将处理后的文件转换为模块以提供给程序使用。

plugin

plugin 的含义是 插件，它可以执行在 webpack 打包过程中的更加复杂一些的任务，用以扩展 webpack 功能。例如：

• 资源管理
• 打包优化
• 注入环境变量

plugin 与 loader 的区别在于，loader 专注于增强 webpack 解析文件的能力，plugin 用来扩展 webpack 的其他功能，使之更加灵活。

output

output 的含义是 输出，它告诉 webpack 如何命名以及在哪里输出最终的打包产物（bundle）。