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

2022-1-7

1. 了解一下CMD模块化规范。（module.export={}相关规范）
2. Require.js不通过config方法配置模块路径时，也可以做require时指定完整的引入路径（require(["./src/module.js"],function(one){})）;
3. npm（node.js package manager）
4. webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

2022-1-8

入门基础：

1. loader，webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
2. 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命令

--watch，监控文件内容改变，实时编译

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",/*绑定的地址*/
  },
};

3.webpack插件小试

4.资源模块

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

asset/resourceasset/inlineasset/sourceurl-loader

a.Resource 资源

 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'
      }
    ]
  },

b.inline资源：

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

c.source资源：

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

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

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

7.babel的使用

2022-1-8晚上

1.代码分离：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
    },
  },
};

import("/main.js").then(({main}=>{}));

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

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

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

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

4.output公共目录

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.动态导入

import()

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

2.懒加载

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

3.预获取、预加载

2022-1-23晚上

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

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

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

细节总结

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