webpack 的核心成员和编外成员

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

前端的工作中离不开 webpack 的陪伴，几乎每天都需要使用它来打包至少数十次，可是我们真的了解它吗？每个 npm run build 的背后到底经历了什么？那今天我们就先来了解一下它的核心成员和编外成员吧。

核心成员

• entry 我们通常称它为入口，也就是一个项目的起点
• output 我们平时管他叫输出，也就是项目打包后存放的位置和名字
• loader 一般被拿来处理非 JavaScript 的代码，比如：css、svg、scss 等
• plugins 插件可以处理一些定制化的任务，比如：压缩、打包优化、重新定义变量 等

编外成员

• mode 一般被称为模式，可以根据所指定的模式，启动对应的优化策略

eg：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path')

const config = {
  mode: 'production'
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

module.exports = config

上面的是 webpack 官网中给出的案例，从中我们可以清晰的看出其核心成员和编外成员的使用方式

• entry 可以通过字符串来指定它的入口路径，比如 ./src
  • 程序根据 entry 进入入口后，会找到其所依赖性的模块，然后对其所依赖的模块进行处理
• output 通过一个具有 path 和 filename 属性的对象来描述程序的输出路径和输出文件的名称
  • 将 entry 处理后的程序写入通过 filename 指定名称和通过 path 指定路径的文件中
• loader 由于 webpack 只能识别 JavaScript 代码，如果想让 webpack 也能够处理 css、svg、scss 这类非 JavaScript 模块，那就需要通过其对应的 loader 程序来作为翻译，将非 JavaScript 的模块转为 webpack 能够识别出来的模块
  • loader 是定义在 module.rules 中的
  • loader 通过 test 来确定要翻译的文件类型，通过 use 来确定使用哪个 loader 来进行翻译
• plugins 往往我们需要一些定制化的功能，比如打包优化，压缩等，这时就需要通过 plugins 来调用一些开源的库中的插件，来提高工作效率
  • plugins 是通过数组的形式来描述的
  • 插件通常是通过 require() 来引入，然后通过 new 来创建它的一个实例，再把 new 出来的实例放到 plugins 的数组中