笔记

Appearance

大纲

概念介绍 ​

webpack 是一个 js 应用程序的静态模块打包器, 通过分析应用程序的依赖, 构建出依赖关系图, 并依此生成一或多个 bundle 。

核心概念 ​

概念说明
模式(mode)当前的运行环境, webpack 在相应模式下有内置的优化处理
入口(entry)项目的入口起点, webpack 将以此作为依赖分析的起点
出口(output)项目的输出终点, webpack 将以此输出构建生成的 bundles
加载器(loader)项目的文件引入, webpack 将将借此处理其他非 js 文件的引入
插件(plugins)项目的其他配置, webpack 将依此实现高定制的环境搭建

常用术语 ​

名词说明
Chunk用来构建的代码块， 即 Bundle 的原材料
Bundle将一或多个模块构建后生成的打包文件, 即 Chunk 构建后的产品
Vendor Entry Point第三方库入口点
Dependency Graph依赖关系图, 由 webpack 根据入口起点模块的依赖关系分析得到
Hot Module Replacement热模块替换, 当模块内容变化时, 响应其变化但无需重新加载页面
Tree Shaking摇树, 移除冗余代码，实现代码量最小化

快速开始 ​

  1. 基础依赖: npm i webpack webpack-cli --save-dev , 其中 'webpack-cli' 可使用 'webpack-command' 代替
  2. 默认路径: webpack 默认使用 'src/index.js' 作为文件入口, 并将构建后文件输出至 'dist/main.js' 中
  3. 运行构建: 使用 npx webpack 运行构建或配置相应的 npm scripts

构建流程 ​

配置文件

  • 不存在 webpack.config.js 文件，将根据默认配置进行构建
  • 若存在 webpack.config.js 文件，将依据配置文件进行构建
  • 使用 npx webpack --config <file> 选项可以指定配置文件具体路径
  • 默认配置文件路径为根目录下的 webpack.config.js 文件

构建路径

  • 源目录: 用于存放开发环境下的代码, 是入口配置的默认目录, 目录名为 src
  • 分发目录: 用于存放生产环境下的代码, 是出口配置的默认目录, 目录名为 dist
  • 默认的入口文件路径为 src/index.js
  • 默认的出口文件路径为 dist/main.js
  • 默认将 src 目录下的文件进行构建输出到 dist 目录中

配置指令 ​

通过配置 npm scripts 可以使用 npm 指令进行统一的命令行操作

package.json

json
"scripts": {
    "dev": "webpack-dev-server --mode=development"
    "build": "webpack --mode=production --config webpack.config.js"
}

此时可以通过使用 npm run build 指令可以运行构建

配置文件 ​

一个配置文件通常的格式如下

webpack.config.js

js
const path = require("path"); //用于处理模块路径
const webpack = require("webpack"); //用于引入webpack内的模块

module.exports = {
  mode: "", // mode 可选 'development' / 'production', 但通常在 npm scripts 中指定
  entry: {
    // 入口配置
  },
  output: {
    // 出口配置
  },
  module: {
    rules: [
      // 加载器相关配置
    ],
  },
  plugins: [
    // 插件相关配置
  ],
  resolve: {
    // 模块解析相关配置
  },
  devtool: "", // source map 相关配置
  devServer: {
    // webpack-dev-server 相关配置
  },
  optimization: {
    // 优化处理相关配置
  },
  externals: {
    // 外部扩展相关配置, 即在 bundle 中去除指定依赖, 该选项通常用于构建目标为 library 的场景
  },
};