说明

这套笔记是对于 webpack 5.x 进行阐述的。（webpack <= 4 用法稍有不同）

概述

什么是 webpack ？

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

webpack 到底做了什么？

webpack会在内部从一个或多个入口点构建一个依赖图(dependency graph)
将你项目中所需的每一个模块组合成一个或多个静态资源模块(webpack 的术语是 bundles)用于展示你的内容。

webpack 的优势是什么？

使用率高：根据 2022 年前端构建工具研究显示，前端构建工具使用这一块，webpack 依然是最高的
配置丰富：针对许多不同的文件（css, js, 图片, 模板 ...）, webpack 都有它对应的成熟的输出处理方案
项目工程化：webpack 对于生产上线的项目具有很高的构建优势（基于 babel, esbuild）和排错机制 (source-map)

如何使用 webpack

1. 环境准备

在学习 webpack 之前，请先确保 PC 安装了 Node.js (使用 node -v或者 npm -v判断当前 PC 是否使用了 Node.js)

2. 初始化项目

在使用 webpack 前，请先使用 npm init或 npm init -y初始化项目配置

# 新建一个 webpack-study 项目
mkdir webpack-study

# 进入 webpack-study 项目
cd webpack-study

# 初始化项目配置
npm init -y

3. 安装依赖

使用 npm 安装三个构建时依赖：webpack、webpack-cli、webpack-dev-server

webpack ： webpack 自身打包需要的依赖
webpack-cli ：webpack 工程开发时所需要的脚手架
webpack-dev-server ：webpack 开发时所需要的开发服务器，配合 webpack-cli 使用

npm install webpack webpack-dev-sever --save-dev

4. 创建文件

在项目根目录下面创建对应的文件：

|- node_modules # 项目所依赖的 node 模块 (s)
|- src
    |- index.js # 项目的入口文件
|- webpack.config.js # webpack 的配置文件

5. 配置 `webpack.config.js`

配置一下根目录下面的 webpack.config.js:

// webpack 是运行在 node.js 上面的
// 请使用 `common.js` 的模块化规范配置 `webpack.config.js`

const path = require('path');

const config = {
  // 配置打包模式为：生产环境
  mode: 'production',
  // 配置打包的入口
  entry: './src/index.js',
  // 配置打包的出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

// 不要忘了把配置导出去
module.exports = config;

配置打包命令

配置开发构建的打包命令

{
  "dev": "NODE_ENV=development webpack-dev-server --config ./webpack.config.js --hot --color"
}

配置生产构建的打包命令

{
  "build": "NODE_ENV=production webpack --config ./webpack.config.js --stats --progress"
}

启动配置

终端输入对应的命令（npm run dev 或 npm run build）进行打包。（打包如果看到了 dist 文件夹，则说明打包成功！）

【webpack 从入门到使用】概述 & 项目搭建

说明

概述