webpack

可以将 webpack 理解为 pipe (管道)。

目录

• webpack
  • 核心概念
  • 安装
  • 开箱即用
  • 示例
  • 灵活的配置
  • 插件和 loader
  • 搭建开发服务器
  • 处理ES6以及更高级的语法
  • 处理 css
    • css-loader
    • style-loader
    • mini-css-extract-plugin
    • 其他 css 相关 loader 和插件
  • 处理图片
    • file-loader
    • url-loader
    • 资源模块
    • ImageMinimizerWebpackPlugin

核心概念

    本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 —— 摘自官网

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility) - ES5 标准
• 环境(environment) - Node.js v10.13.0+

https://webpack.docschina.org/concepts

安装

本文使用webpack v5.0进行配置

• yarn add webpack webpack-cli -D

开箱即用

    webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。 —— 摘自官网

npx webpack

示例

用于理解核心概念

1. 创建两个文件，src/index.js, src/test.js。
2. 执行命令打包构建 npx webpack
3. 查看打包结果

结论：本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 —— 摘自官网

灵活的配置

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。

1. 新建文件webpack.config.js,使用 node 语法。

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"), // 此处需要一个绝对路径
    filename: "js/index.[hash].js",
  },
};

2. 配置npm script

  + "build":"webpack --config webpack.config.js"

插件和 loader

• HtmlWebpackPlugin

yarn add html-webpack-plugin -D

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"), // 此处需要一个绝对路劲
    filename: "js/index.[hash].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", //模板位置
      filename: "index.html", //打包出来后的文件名
    }),
  ],
};

此时即可看到控制台输出了打印

    但此时修改文件后只能再次执行打包命令，才能看到最新结果，非常繁琐。如何才能更改代码后，webpack 自动打包构建，实时编译及更新页面呢。接下来介绍webpack 的 HMR(热更新)

搭建开发服务器

1. 安装依赖

yarn add webpack-dev-server -D

2. 配置npm script

+ "dev": "webpack serve --progress --color --config webpack.config.dev.js"

3. 运行命令

   此时即可看到控制台的 HMR 启动成功,修改文件后页面实时更新了结果。

从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。

处理ES6以及更高级的语法

未转换前的构建包代码：\nconst sum = (a, b) => {\r\n console.log(a+b);\r\n};

转换后的构建包代码：\nvar sum = function sum(a, b) {\n console.log(a + b);\n};

1. 安装依赖

yarn add babel-loader @babel/core @babel/preset-env -D

2. 配置 loader

+ module: {
+   rules: [
+    {
+      test: /\.m?js$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', { targets: "defaults" }]
+          ]
+        }
+      }
+    }
+  ]
+ }

处理 css

css-loader

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

1. 安装依赖

yarn add css-loader -D

2. 配置 loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
  ...,
    + new MiniCssExtractPlugin()
  ...
]
module{
  ...,
    +  {
    +     test: /\.css$/i,
    +     use:  use: [MiniCssExtractPlugin.loader,"css-loader"],
    +  }
  ...
}

    此时在 js 中既可以访问到 css 变量，但此时 css 还不能直接作用与页面，还需要结合style-loader一起使用

style-loader

将 CSS 注入 DOM。

 +  {
 +     test: /\.css$/i,
 +     use: ["style-loader","css-loader"], // 应用规则为从下至上，从右到左
 +  }

此时，可以看到 css 效果已作用于页面，但存在以下缺点

1. css 被打包进入和 js 文件，随着 css 编写越来越多，js 文件将会越来越大。
2. 打开浏览器控制台可发现，style-loader 是采用 js 通过插入多个 <style></style>标签的形式 自动把 样式 插入到 DOM 中，也就是全部采用的内部样式，不利于样式和结构的分离与维护。

为了解决以上问题mini-css-extract-plugin孕育而生。

mini-css-extract-plugin

    本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

注意：本插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作。

1. 安装依赖

yarn add mini-css-extract-plugin -D

2. 配置 loader

 +  {
 +     test: /\.css$/i,
 +     use: ["style-loader","css-loader"]
 +  }

其他 css 相关 loader 和插件

• less less-loader 处理 less 文件
• sass sass-loader 处理 sass 文件
• postcss autoprefixer 自动添加浏览器前缀
• css-minimizer-webpack-plugin 压缩 css

处理图片

在此之前，先介绍 3 个 loader。

• raw-loader 将文件导入为字符串
• file-loader 解析图片类型的静态资源，将文件发送到输出目录。
• url-loader 将文件作为 data URI 内联到 bundle 中,,低于阈值采用内联，高于阈值采用外联。

    url-loader 是增强型的file-loader。如果图片较多，会发很多 http 请求，会降低页面性能。url-loader 会将引入的图片编码，生成 dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行 copy。

file-loader

1. 安装依赖

yarn add file-loader -D

2. 配置 loader

module: {
  ...,
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              outputPath: "imgs",// 输出目录位置
+            },
+          },
+        ],
+      },
  ...
}

    此时即可发现可在 js 文件中直接引入图片资源，但是所有图片都采用了外联模式，如果图片资源文件过多，会增加 http 请求。那当图片较小时，我们是不是可以将图片资源转换为DATAURL-base64形式，降低 http 请求。url-loader便孕育而生。

url-loader

一个用于将文件转换为 base64 URI 的 webpack 加载器。

1. 下载依赖

yarn add url-loader -D

2. 配置 loader

 module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },

    此时可看到，其中一个尺寸超过limit的图片被外联，一个小于limit的图片资源被转换为了base64 url并被打进了代码中，没有产生多余的资源文件。思考？

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

    在 webpack5 之前通常使用row-loader,url-loader,file-loader来处理文件。webpack5 之后提供了资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 - url-loader，并且配置资源体积限制实现。

改造 webpack 配置文件如下：

module: {
  ...,
+    {
+      test: /\.(png|jpg|gif)$/i,
+      type: "asset",
+       parser: {
+         dataUrlCondition: {
+           maxSize: 8 * 1024 // 4kb
+         }
+       }
+    }
  ...
}

此方法会跟使用url-loader产生同样的效果。

ImageMinimizerWebpackPlugin

自动压缩图片

官网介绍：ImageMinimizerWebpackPlugin