《千锋最新前端webpack5》学习笔记，持续记录

友人a丶
JS笔记
2022-01-07
1259热度
2评论

视频地址：https://www.bilibili.com/video/BV1YU4y1g745

webpack文档：https://webpack.docschina.org/concepts/

2022-1-7

了解一下CMD模块化规范。（module.export={}相关规范）
Require.js不通过config方法配置模块路径时，也可以做require时指定完整的引入路径（require(["./src/module.js"],function(one){})）;
npm（node.js package manager）
npm常用命令详解：https://segmentfault.com/a/1190000012099112、https://segmentfault.com/a/1190000007019570?utm_source=sf-similar-article
关于npx：https://www.ruanyifeng.com/blog/2019/02/npx.html
js代码压缩、美化工具：https://segmentfault.com/a/1190000010874406
webpack命令行接口：https://webpack.docschina.org/api/cli/
webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

扩展

Progressive Web App（PWA）：https://blog.csdn.net/qq_19238139/article/details/77531191
cnpm（中国npm镜像）：https://npmmirror.com/
如果你打开的是别人的项目，这个时候一般是没有任何依赖包的，但是所以需要的包已在package.json里面写好了，这个时候我们就可以使用npm install来安装所有项目中需要的依赖包了。npm会自动安装整个项目的所有依赖包。

2022-1-8

入门基础：

loader，webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
plugin：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

1.webpack安装（node.js环境）

包括webpack和webpack cli两个软件包。

全局安装（全局可用）

npm install webpack webpack-cli --global //全局安装

当前目录安装

npm -init -y  //初始化包配置文件
npm install webpack webpack-cli --save-dev  //当前工作目录安装

2.webpack cli命令

Build，运行 webpack（默认命令，可用输出文件）。
```
--watch，监控文件内容改变，实时编译
```
Init，用于初始化一个新的 webpack 项目。
Loader，初始化一个 loader。
Plugin，初始化一个插件。
Info，输出你的系统信息。
Configtest，校验 webpack 配置。
Serve，运行 webpack 开发服务器。
Watch，运行 webpack 并且监听文件变化。
Flags，配置项调整

3.webpack自定义配置（webpack.config.js），以下为demo

const path = require('path');
module.exports = {
  /*入口文件配置*/
  entry: './path/to/my/entry/file.js',
  /*输出文件配置*/
  output: {
    path: path.resolve(__dirname, 'dist'), /*输出的目录*/
    filename: 'my-first-webpack.bundle.js', /*输出为文件名*/
    clean:true,/*是否清理后输出*/
  },
  /*loader,也称模块*/
  module: {
    rules: [{ test: /.txt$/, use: 'raw-loader' }],
  },
  /*plugin*/
  plugins: [
     /*自动生成html文件的插件*/
     new HtmlWebpackPlugin({ 
         template: './src/index.html',/*模板文件路径*/
         filename:"app.html",/*输出文件名*/
         inject:"body" /*脚本注入位置*/
     })
  ],
  /*开发模式*/
  mode:'none'，

  /*开发环境服务器先按照webpack-dev-server*/
  devServer: {
    open: true,/*是否启用*/
    host: "localhost",/*绑定的地址*/
  },
};

path模块说明：https://www.runoob.com/nodejs/nodejs-path-module.html

完整配置说明文档：https://webpack.docschina.org/configuration/

3.webpack插件小试

HtmlWebpackPlugin，该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
webpack-dev-server，webpack 开发服务器。webpack serve命令启动的便是它。

4.资源模块

模块的配置说明：https://webpack.docschina.org/configuration/module/

资源模块说明：https://webpack.docschina.org/guides/asset-modules/#root

Rules属性的配置：https://webpack.docschina.org/configuration/module/#modulerules

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

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

a.Resource 资源

匹配到的引入的文件都将被发送到输出目录，并且其路径将被注入到输出文件 bundle.js 中。

默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串：

 output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   /* 自定义资源输出的文件名*/
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    /*创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。 
      这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。*/
    rules: [
      /*rule,每个规则可以分为三部分 - 条件(condition)，
        结果(result)和嵌套规则(nested rule)。*/
      {
        /* test 属性，识别出哪些文件会被转换。*/
        test: /.png/,
        type: 'asset/resource'
      }
    ]
  },

输出时支持的变量名如下（同output.filename）：https://webpack.docschina.org/configuration/output/#outputfilename

b.inline资源：

不同于resouce输出路径，inline输出的事data url ，默认为base64编码后的data url

c.source资源：

针对TXT文件时，将会把txt的内容原样注入到输出文件中。

5.Loader（无需手动实例化相关对象）

css-loader：将css识别为模块；style-loader：将css放到页面上，less-loader：解析less；sass-loader：解析sass

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        /* loader的加载顺序是从后往前 */
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

6.plugin （需import引入，并实例化）

miniCssExtractplugin，引入该插件后可使用MiniCssExtractPlugin.loader代替style-loader；合并引入的多个css模块到css文件；

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      /*类似于 webpackOptions.output 中的选项*/
      /*所有选项都是可选的*/
      /* 输出的文件路径、文件名*/
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
}

CssMinimizerWebpackPlugin，优化和压缩 CSS。不同于其他插件，该插件在optimization配置项中使用

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

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

7.babel的使用

安装：https://webpack.docschina.org/loaders/babel-loader#root

npm install -D babel-loader @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /.m?js$/,
     /* 排除指定目录下的文件 */
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

regeneratorRuntime报错解决办法：https://www.cnblogs.com/raind/p/9017817.html 、 @babel/plugin-transform-runtime

2022-1-8晚上

entry的配置：https://webpack.docschina.org/concepts/entry-points/#root

output的配置：https://webpack.docschina.org/concepts/output/

1.代码分离：

普通多入口（缺点：会打包重复的代码，如引入的同一个库）
entry下的dependOn：当前入口所依赖的入口。它们必须在该入口被加载前被加载。
SplitChunksPlugin，最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。
splitChunks.chunks，这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。
```
module.exports = {
  //...
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
    },
  },
};
```
Es6的import方法动态导入（运行到导入语句时才进行导入），后 webpack会自动进行代码分离。
```
import("/main.js").then(({main}=>{}));
```
多页应用：https://zhuanlan.zhihu.com/p/109527475，多页面打包的原理就是：配置多个entry和多个HtmlWebpackPlugin

2.缓存第三方库（optimization.splitchunks.cacheGroup）

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          test: /[/]node_modules[/]|vendor[/]analytics_provider|vendor[/]other_lib/,
        },
      },
    },
  },
};

3.各种资源的输出目录：

js的目录在output配置项的filename中直接指定。
css在加载loader的配置项中指定。
assets资源模块在assetModuleFilename中指定。
每种模块可定义rules规则时可以单独定义filename打包到不同目录。

4.output公共目录

此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或 <base> 标签）解析。

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/',
  },
};

5.生产环境和开发环境 (mode配置项）

生成环境下插件会按自身的功能进行运转，开发环境下有些插件不会进行相关处理；可在命令行内传入相关变量，替换配置项：

npx webpack --env production //生成环境构建
npx webpack --env development  //开发环境构建

--env global=123 ，也可以传递键值对，在webpack-config.js中使用函数形式的配置形式，函数参数为传入的命令参数（配置项中使用这些变量，实现动态参数构建）。函数参数为一个对象，所有传入的参数为该对象的属性。

6.构建时的JS压缩

TerserWebpackPlugin ，该插件使用 terser 来压缩 JavaScript。

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

7.不打包，直接引入外部资源

externals配置项用于将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

module.exports = {
  externals: {
    jquery: 'jQuery',
  },
};

2022-1-17晚上

前提：代码分离（代码拆分）一般是指抽离共同的代码，动态导入是使用时才会动态加载JS，

1.动态导入

当涉及到动态代码拆分时，webpack 提供了两个类似的技术。第一种，也是推荐选择的方式是，使用符合 ECMAScript 提案的 import() 语法来实现动态导入。

和静态导入的区别在于一个是运行前加载，一个是运行时加载。

2.懒加载

延迟加载（懒加载）或“按需”加载是优化站点或应用程序的好方法。这种做法本质上涉及在逻辑断点处拆分代码，然后在用户完成需要或将需要新代码块的操作后加载它。这加快了应用程序的初始加载速度并减轻了其整体重量，因为某些块甚至可能永远不会被加载。

3.预获取、预加载

link标签：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link

link预获取：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types/prefetch

<link rel="preload" href="style1.css" as="style">
<link rel="preload" href="main1.js" as="script">

2022-1-23晚上

1.import动态导入魔法注释（在声明 import 时，可使用的一些内置指令）：

import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

webpackChunkName：用于指定打包的名字；
webpackPrefetch：是否预获取；
webpackPreLoad：是否预加载；

细节总结

css里面的url图像，同样会被webpack进行构建。
css使用的font-face字体，可使用asset资源模块，test配置中匹配后自动构建。
同样的可通过使用loader对csv、xml（使用loader）yaml、taml（使用parser）等各种数据文件进行处理。