速记 webpack 的基本使用

目录

什么是 webpack ?

在项目中安装 webpack

 在项目中配置 webpack

webpack 中的默认约定

自定义打包的入口和出口

webpack 插件的作用

webpack-dev-server

html-webpack-plugin

devServer 节点

webpack 中的 loader

配置 webpack 的打包发布

Source Map

拓展：webpack 中 @ 的原理和好处

---

什么是 webpack ?

webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器 JavaScript 的兼容性、性能优化等强大的功能。

---

在项目中安装 webpack

在终端中运行如下命令，安装 webpack 相关的两个包

npm i webpack@5.42.1 webpack-cli@4.7.2 -D

---

 在项目中配置 webpack

（1）在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本设置：

module.exports = {
  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
  // 开发时候一定要使用 development，因为追求的是打包的速度，而不是体积；
  // 反过来，发布上线的时候一定要用 production，因为上线追求的是体积小，而不是速度快！
  mode: "development",
};

（2）在 package.json 的 scripts 节点下，新增 dev 脚本如下：

  "scripts": {
    "dev": "webpack"
  },

（3）在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

---

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下默认约定：

（1）默认的打包入口文件为 src -> index.js

（2）默认的输出文件的路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改默认约定。

---

自定义打包的入口和出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口，代码示例如下：

// 导入 node.js 中专门操作路径的模块
const path = require("path");
module.exports = {
  // 代表 webpack 运行的模式，可选值有两个 development 和 production
  mode: "development",
  // 打包入口文件的路径
  entry: path.join(__dirname, "./src/index1.js"),
  output: {
    // 输出文件的存放路径
    path: path.join(__dirname, "dist"),
    // 输出文件的名称
    filename: "bundle.js",
  },
};

---

webpack 插件的作用

通过安装和配置第三方的插件，可以扩展 webpack 的能力，从而让 webpack 用起来更加方便。最常用的 webpack 插件有如下两个：

（1）webpack-dev-server

• 类似于 node.js 中用到的 nodemon 工具
• 每当修改源代码，webpack 会自动进行项目的打包和构建

（2）html-webpack-plugin 

• webpack 中的 HTML 插件（类似于一个模板引擎插件）
• 可以通过此插件自定制 index.html 页面的内容

---

webpack-dev-server

运行如下命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

 配置 webpack-dev-server：

（1）修改 package.json -> script 中的 dev 命令如下：
 

  "scripts": {

    "dev": "webpack serve"

  },

 （2）再次运行 npm run dev 命令，重新进行项目的打包

 （3）在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server 会启动一个实时的打包的 http 服务器。

---

html-webpack-plugin

安装 html-webpack-plugin：

npm install html-webpack-plugin@5.3.2 -D

配置 html-webpack-plugin:

// 导入 html-webpack-plugin 插件，得到构造函数
const HtmlPlugin = require("html-webpack-plugin");

// new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个文件
  template: "./src/index.html",
  // 指定复制出来的文件名和存放路径
  filename: "./index.html",
});

module.exports = {
  mode: "development",
  // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin],
};

注意：

（1）通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

（2)   HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

---

devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

  devServer: {
    //初次打包完成后，自动打开浏览器
    open: true,
    // 实时打开所使用的主机地址
    port: 80,
    // 实时打包所使用的端口号
    host: "127.0.0.1",
  },

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

---

webpack 中的 loader

loader 概述：

在实际开发过程中，webpack 默认只能处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理待定的文件模块。比如：

• css-loader 可以打包处理 .css 相关的文件
• less-loader 可以打包处理 .less 相关的文件
• bable-loader 可以打包处理 webpack 无法处理的高级 JS 语法 

打包处理 css 文件： 

（1）运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader 

（2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  module: {  // 所有第三方文件模块的匹配规则
    rules: [  
      // 文件后缀名的匹配规则
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },

其中，test 表示匹配的文件类型，use 表示对应要调用的 loader 

注意：

• use 数组中指定的 loader 顺序是固定的
• 多个 loader 的调用顺序是：从后往前调用

打包处理 less 文件：

（1）运行 npm i less-loader@4.1.1 -D 命令，安装处理 less 文件的 loader 

（2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下:

  module: {
    // 所有第三方文件模块的匹配规则
    rules: [
      // 文件后缀名的匹配规则
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
    ],
  },

打包处理样式表中与 url 路径相关的文件：

（1）运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

（2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下:

  module: {
    // 所有第三方文件模块的匹配规则
    rules: [
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，，如果有多个 loader，则必须指定数组
      { test: /\.jpg|png|gif$/, use: "url-loader?limit=470" },
    ],
  },

其中 ? 之后的是 loader 的参数项：

• limit 用来指定图片的大小，单位是字节（byte)
• 只有 < limit 大小的图片，才会被转为 base64 格式的图片

 打包处理 js 文件中的高级语法：

webpack 只能打包处理一部分高级的 javaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

运行如下命令安装对应的依赖包:

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

      // 使用 babel-loader 处理高级 js 语法
      // 在配置 babel-loader 的时候，我们只需把自己的代码进行转换即可，一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性，不需要我们关心
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },

 在项目根目录下，创建名为 babel.config.js 的配置文件，定于 Babel 的配置项如下：

module.exports = {
    // 声明 babel 可用的插件
    // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
  };
  

---

配置 webpack 的打包发布

在 package.json 文件的 script 节点下，新增 build 命令如下：

  "scripts": {
    "dev": "webpack serve",     //开发环境中，运行 dev 命令
    "build": "webpack --mode production"      //项目发布时，运行 build 命令
  },

--mode 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的 mode 选项。

把 JavaScript 文件统一生成到 js 目录中：

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

  output: {
    // 输出文件的存放路径
    path: path.join(__dirname, "dist"),
    // 输出文件的名称
    // 明确告诉 webpack 把生成的 bundle.js 文件存放到 dist 目录下的 js 子目录中
    filename: "js/bundle.js",
  },

把图片文件统一生成到 images 目录中：

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: "url-loader?limit=470&outputPath=images" },

自动清理 dist 目录下的旧文件：

为了在每次打包发布时自动清除掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

npm install --save-dev clean-webpack-plugin

在 webpack.config.js 的 plugins 数组中：

  plugins: [new CleanWebpackPlugin()],

---

Source Map

什么是 Source Map：
Source Map 就是体格信息文件，里面存储着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大方便后期的调试。

默认 Source Map 的问题：

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置，会导致运行时报错的行数与源代码的运行数不一致的问题。

解决默认 Source Map 的问题：
开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：
 

module.exports = {
  // 此选项生成的 Source Map 能够保证“运行报错的行数”与“源代码的行数”保持一致
  devtool: "eval-source-map",

  // eval-source-map 仅限在“开发模式”下使用，不建议在“生成模式”下使用
  mode: "development",
}

webpack 生产环境下的 Source Map：

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给有所图之人。

只定位行数不暴露源码：

在生产环境下，如果只想定位报错的具体行数，且不暴露源码。此时可以将 devtool 的值设置为 nosources-source-map。

  devtool: "nosources-source-map",

  Source Map 的最佳实践：

（1）开发环境下：

• 建议把 devtool 的值设置为 eval-source-map
• 好处：可以精准定位到具体的错误行

（2）生产环境下：

• 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
• 好处：防止源码泄露，提高网站的安全性

---

拓展：webpack 中 @ 的原理和好处

我们经常会遇到多层查找路径，比较繁琐，例如下面示例

//在src/info.js 中查找 src/js/test/main/msg.js
import msg from "../../../msg"

如果使用 @ 表示 src 源代码目录，从外往里查找，不要使用 ../ 从里往外查找，会方便很多

import msg from "@/msg.js";

但要注意 webpack 不能直接使用 @ ，而要先在 webpack.config.js 配置

module.exports = {
  resolve: {
    alias: {
      // 告诉 webpack,程序员写的代码中，@ 符号表示 src 这一层目录
      "@": path.join(__dirname, "/src"),
    },
  },
};