# homework-fe-03-02

**Repository Path**: sfljskeprim_admin/homework-fe-03-02

## Basic Information

- **Project Name**: homework-fe-03-02
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-03
- **Last Updated**: 2021-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。
    Webpack是一个静态模块化打包工具。
    Webpack的构建流程：

   1. 初始化项目 `npm init -y`

   2. 创建webpack配置文件：`npm i -D webpack webpack-cli` 安装webpack依赖， 创建配置文件： `webpack.config.js`

   3. 项目创建src编写源代码

   4. webpack的常用配置项：

             1. mode 模式：development 开发模式、production生产模式、none
             2. entry 入口
             3. output 出口
             4. module模块配置，loader配置在此
             5. plugins 插件配置
             6. devserver 开发服务器配置

         ```javascript
         /**
          * webpack的配置文件
          */
         const {resolve} = require("path");
         
         module.exports = {
             //打包模式
             mode: "production",
             //入口文件
             entry: './src/index.js',
             //出口配置
             output: {
                 //输出目录
                 path: resolve(__dirname, "dist"),
                 //输出文件的名称
                 filename: 'bundle.js'
             },
             
             //模块配置
             module: {
                 rules: [
                     //指定多个配置规则
                 ]
             },
             //插件的配置
             plugins: [
                 
             ],
             
             //开发服务器
             devServer: {
                 
             }
         }
         ```

         

   5. 打包CSS：

             1. 需要安装npm：`css-loader` 将css转换为js，输出到打包后的js文件中 、`mini-css-extract-plugin`将CSS打包成独立的文件、`less less-loader` 使用less编写样式、`postcss-loader  autoperfixer` 解决CSS hack兼容不同的浏览器。

         ```javascript
         //模块配置
             module: {
                 rules: [
                     //指定多个配置规则
                     {
                         test: /\.css$/i,
                         //use中loader的加载顺序，css-loader:先将css输出到js，style-loader然后将js中的样式挂载到<style>中
                         use: [
                             // "style-loader",
                             MiniCssExtractPlugin.loader,//将CSS打包到独立的文件中
                             //2. 将样式文件输出到js中
                             "css-loader",
                             //1. 通过postcss-loader给样式属性添加浏览器前缀，css hack
                             "postcss-loader"
                         ]
                     },
                     {
                         test: /\.less$/i,
                         use: [
                             // "style-loader",
                             //4. 将css打包成独立的文件
                             MiniCssExtractPlugin.loader,
                             //3. css样式文件输出到js中
                             "css-loader",
                             //2. css hack
                             "postcss-loader",
                             //1. 将less转成普通的css
                             "less-loader"]
                     }
                 ]
             },
             plugins:[
                 new MiniCssExtractPlugin({
                     filename: "css/[name].css"//将css文件命名或指定文件目录
                 })//实例化插件
             ]
         ```

         2. css格式校验：安装npm  `stylelint  stylelint-config-standard  stylelint-webpack-plugin`
         3. 配置校验规则

         ```
           plugins: [
                 new MiniCssExtractPlugin({
                     filename: "css/[name].css"//将css文件命名或指定文件目录
                 }),//实例化插件
                 new StyleLintPlugin({
                     //指定要校验格式的目标文件
                     files: ['src/css/*.{css,less,sass,scss}']
                 })
             ]
         ```

         stylelint.config.js

         ```
         module.exports = {
           extends: ["stylelint-config-standard"],
           rules: {
             "at-rule-no-unknown": null,
           },
         };
         ```

         4. 压缩CSS：`npm install optimize-css-assets-webpack-plugin -D`代码使用的 webpack V5 使用`css-minimizer-webpack-plugin`

   6. 打包HTML：

             1. `html-webpack-plugin`:生成HTML文件，用于访问服务器文件，可以加载所有访问的资源，指定HTML模板，设置HTML变量、压缩HTML

         ```
          //打包多个HTML,设置多个plugin
             new HTMLWebpackPlugin({
               filename: "about.html",
               template: "./src/index.html",
               title: "关于我们",
               //压缩HTML
               minify: {
                 collapseWhitespace: true,
                 keepClosingSlash: true,
                 removeComments: true,
                 removeRedundantAttributes: true,
                 removeScriptTypeAttributes: true,
                 removeStyleLinkTypeAttributes: true,
                 useShortDoctype: true,
               },
             }),
         ```

   7. 打包JS文件：

             1. `npm install babel-loader @babel/core @babel/preset-env  core-js -D` 通过`core-js` 进行按序转译JS 新语法

         ```
         {
                 test: /\.m?js$/,
                 exclude: /node_modules/,
                 use: {
                   loader: "babel-loader",
                   options: {
                     presets: [
                       [
                         "@babel/preset-env",
                         {
                           //运行环境
                           // targets: "defaults", 允许手动指定兼容浏览器的版本
                           targets: {
                             chrome: "58",
                             ie: "9",
                             firefox: "60",
                             safari: "10",
                             edge: "17",
                           },
                           //core-js版本
                           corejs: 3,
                           //按需加载
                           useBuiltIns: "usage",
                         },
                       ],
                     ],
                   },
                 },
               },
         ```

         2. Webpack 校验JS代码格式：

            ```javascript
            
            npm i eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D
            
             //校验js的格式
                new ESLintWebpackPlugin({
                  //自动解决常规的代码格式错误,在打包时会自动解决常规的代码格式错误
                  fix: true,
                }),
                
                //package.json 配置校验规则
                 "eslintConfig": {
                "extends": "airbnb-base"
              }
              
              //.js 忽略eslint
              // eslint-disable-next-line
            window.showMsg = showMsg;
            
            ```

   8. 打包资源：

             1. 安装`npm i file-loader url-loader html-loader -D`
             2. 或者使用webpack v5提供的资源模块

```javascript
  //处理字体文件
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        //使用资源模块 处理字体文件
        type: "asset", //asset可以在asset/resource(文件大于8KB) 和 asset/inline(文件小于8KB) 之间进行选择
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, //默认是8KB 可以指定大小
          },
        },
        generator: {
          filename: 'fonts/[name][ext]'
        }
      },
     //处理图片
      {
        test: /\.(png|gif|jpe?g)$/i,
        type: "asset", //asset可以在asset/resource(文件大于8KB) 和 asset/inline(文件小于8KB) 之间进行选择
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, //默认是8KB 可以指定大小
          },
        },
        generator: {
          filename: 'image/[name][ext]'
        }
      },
           //html-loader
      {
        test: /\.htm|html$/i,
        use: {
          loader: "html-loader",
          //url-loader 默认采用ES Module规范进行解析，但是html-loader引入图片使用的是CommonJS规范
          //关闭url-loader默认的ES Modules规范，强制url-loader使用CommonJS规范进行打包
          options: {
            //如果是webpack4 只需要url-loader配置ESmodules false,webpack5 需要在HTML-loader中也需要进行配置
            esModule: false,
          },
        },
      },
```

9. 拷贝/清理文件：

   1. `copy-webpack-plugin` 插件需要处理其他的文件，可以直接复制到输出目录
   2. `npm i clean-webpack-plugin -D` 删除某个目录文件，主要用于打包之前的一些清除工作配置

10. 发布服务：

    1. 安装webpack-dev-server

    ```javascript
     //开发服务器
      devServer: {
        //指定加载内容的路径
        //contentBase 已经弃用了
        static: {
          directory: path.join(__dirname, "dist"),
        },
        compress: true, //启动gzip压缩
        port: 9200, //指定端口号
        //热更新 hot:true webpack4
        //webpack5  liveReload 禁用hot
        liveReload: true,
    
        //配置代理 解决接口跨域问题
        proxy: {
          "/api": {
            //http://localhost:9200/api/users 实际上访问的是target的接口https://api/github.com/api/users
            //指向的内容
            target: "https://api.github.com",
            pathRewrite: {
              "^/api:": "",//当匹配到/api将/api设置为"" https://api/github.com/api/users -> https://api/github.com/users
            },
            //不能使用localhost:9200作为github的主机名
            changeOrigin:true,
          },
        },
      },
      //配置目标
      target: "web", //热更新只适用于web
    ```

11. 区分打包环境：

    1. 通过环境变量区分

       1. - `webpack --env production`
          - webpack.config.js中判断env

    2. 通过配置文件区分

    3. - webpack.dev.conf.js - 开发环境
       - webpack.prod.conf.js - 生成环境

    - - 执行打包时，指定配置文件 `webpack --config webpack.[dev|prod].conf.js`

    - 

    - 

    - 

    - 

12. 代码分离：

    1. 多入口打包：配置entry加载多个入口文件
    2. 提取公共模块：optimization.splitChunks.chunks:all
    3. 动态导入: 按需加载 | 预加载 `import(/* webpackChunkName: 'desc' */"./wp")`

13. Source Map 源码映射，调试

    1. 生成 Source Map ：`devtool: '映射模式'` 定位的文件就是源代码文件，而不是构建代码

14. 缓存：

    1. Babel 缓存 `cacheDirectory:true` 第二次构建时就会读取之前的缓存，提高构建速度，不用将所有的js做babel转译，直接使用缓存的内容
    2. 文件资源缓存：如果代码在缓存期内，代码更新后看不到实时效果，需要更新文件名称，确保加载最新文件

15. 模块解析：

    1. resolve 配置项：配置模块解析的规则

       常用的配置项:

       - alias 配置模块加载的路径别名 ` alias:{'@':resolve('src')}`
       - extensions: 引入模块时，可以省略哪些后缀

16. 排除依赖：

    1. externals : 排除打包依赖项，防止对某个依赖项进行打包，一般成熟的第三方库，是不需要打包的,直接引入CDN即可

17. 模块联邦：

    1. Module Federation ：多个应用中，可以共享一个模块，本地可以调远程的模块。

       - 模块提供方

       - - name：当前应用名称
         - filename:打包后的文件名称

       - - exposes:暴露模块 相当于export导出     模块名称：模块文件路径

       - 模块使用方：

       - - remote：导入模块  导入后的别名："远程应用名称@远程地址/远程导出的文件"
         - import("导入后的别名/模块名称").then(....)





### Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

webpack 是基于插件的机制的，webpack插件是一个具有`apply`方法的JavaScript对象，`apply`方法会被`webpack compiler`调用，并且整个编译生命周期都可以访问`compiler`对象。

通过在生命周期的钩子中挂载函数，来实现扩展功能。

生命周期就是整个生命过程中的关键节点。从出生到死亡：初始化-> 挂载 -> 渲染 -> 展示 -> 销毁。

钩子：是**提前在可能增加功能的地方，预设一个函数**

```javascript
//声明自定义插件
/**
 * 自定义去除注释的插件
 */
class MyPlugin {
  constructor(options) {
    this.options = options || { target: ".css" };
    console.log("插件配置选项", options);
  }

  //必须声明apply方法,参数compiler
  apply(compiler) {
    //在钩子上挂载功能
    //1. 删除注释
    compiler.hooks.emit.tap("MyPlugin", (compilation) => {
      //compilation是此次打包的上下文
      for (const name in compilation.assets) {
        console.log(name);
        //针对css文件执行相关操作
        if (name.endsWith(this.options.target)) {
          //获取处理之前的内容
          const contents = compilation.assets[name].source(); //获取文件的内容
          //处理文件的内容，通过正则表达式删除注释
          const noComments = contents.replace(/\/\*[\s\S]*?\*\//g, "");
          //将处理过的内容，替换掉
          compilation.assets[name] = {
            //必须指定两个属性source和size
            source: () => noComments,
            size: () => noComments.length,
          };
        }
      }
    });
  }
}

module.exports = MyPlugin;

```

Loader 本质上就是ESM模块，它导出一个函数，在函数中对打包资源进行转换。自定义Loader中，**必须保证最后一个loader返回的必须是Javascript代码**

```javascript
const marked = require("marked");

//获取传递的参数
const { getOptions } = require("loader-utils");

//loader本质上导出的就是一个函数 使用普通函数，不要使用箭头函数，要使用this
module.exports = function (source)  {
  //获取loader的配置项
  const options = getOptions(this);
  console.log(options)

  const html = marked.parse(source);

  //返回的结果必须是js代码
  // return 'console.log("my loader")';
  // return `module.exports = ${JSON.stringify(html)}`;

  //返回HTML 交给下一个loader进行处理
  return html;
};
```