构建webpack知识体系｜青训营笔记

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法。
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。

本文将简单总结一下Webpack的相关知识。

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

基本使用

资源目录：

python 复制代码

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

创建相关文件：

javascript 复制代码

export default function count(x, y) {
  return x - y;
}

javascript 复制代码

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

javascript 复制代码

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

下载依赖:

打开终端，来到项目根目录。运行以下指令：npm init -y,- 初始化package.json，此时会生成一个基础的 package.json 文件。
下载依赖：npm i webpack webpack-cli -D

启用 Webpack：

开发模式：npx webpack ./src/main.js --mode=development
生产模式：npx webpack ./src/main.js --mode=production

其中npx webpack: 是用来运行本地安装 Webpack 包的。 ./src/main.js: 指定Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。--mode=xxx：指定模式（环境）。

最后，默认 Webpack 会将文件打包输出到 dist 目录下。

5 大核心概念

entry（入口）：指示 Webpack 从哪个文件开始打包
output（输出）：指示 Webpack 打包完的文件输出到哪里去，如何命名等
loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
plugins（插件）：扩展 Webpack 的功能
mode（模式）

配置文件

javascript 复制代码

const path = require("path");

module.exports = {
  // 入口
  entry: "./src/main.js",
  // 输出
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", 
};

使用npx webpack指令运行。

总结

Webpack包括开发模式和生产模式两种，其中开发模式顾名思义就是我们开发代码时使用的模式。在此模式下，可以编译代码，使浏览器能识别运行，另外开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源；还可以代码质量检查，树立代码规范，提前检查代码的一些隐患，让代码运行时能更加健壮，提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。另外生产模式下主要对代码进行优化，让其运行性能更好。Webpack还是需要花费一定时间去学习的，在实际开发比较重要。