webpack面试1

一、谈谈对webpack的认识

1. webpack是一个模块打包工具，它能够很好地管理与打包Web开发中所用到的HTML、JS、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器（loader）来处理。webpack会分析模块间的依赖关系，最后输出优化且合并后的静态资源。
2. 在开发阶段，webpack提供了一个基于Node.js Express框架的开发服务器。开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而实现页面的自动刷新。
3. webpack具有5大核心：entry（入口）、output（输出）、loader（加载器）、plugins（插件）、mode（模式）。
   • entry：指示webpack以哪些文件作为入口，进行打包
   • output：指示webpack将打包后的资源输出到哪个位置
   • loader：webpack本身只能处理js、json等资源，借助loader能完成对其他资源的解析处理
   • plugins：扩展webpack功能，加入自定义的构建行为
   • mode：指示webpack以哪种模式进行打包，有开发模式（development）和生产模式（production）

二、常用的loader

loader主要用于对模块的源代码进行转换，实现对不同格式文件的处理，常用的loader如下：

• 处理样式资源

  1. less-loader、sass-loader、stylus-loader：将各种对应的样式文件使用对应的loader转化为css文件

  2. css-loader：负责将css文件编译成webpack能识别的模块

  3. style-loader：动态创建style标签，将css模块的内容插入

  4. postcss-loader：css兼容性处理

     • 下载依赖

       npm i postcss-loader postcss postcss-preset-env -D
       

     • 配置

       module.exports = {
           ......
           module: {
               rules: [
                   {
                       // 用来匹配 .css 结尾的文件
                       test: /\.css$/,
                       // use 数组里面 Loader 执行顺序是从右到左
                       use: [
                         "css-loader",
                         {
                           loader: "postcss-loader",
                           options: {
                             postcssOptions: {
                               plugins: [
                                 "postcss-preset-env", // 能解决大多数样式兼容性问题
                               ],
                             },
                           },
                         },
                       ],
                   }
               ]
           }
           ......
       }
       

     • 在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度

       {
         // 其他省略
         "browserslist": ["last 2 version", "> 1%", "not dead"]
       }
       

• 处理图片资源

  1. file-loader：将文件输出到指定的文件夹中，并在代码中通过相对URL引用这些文件

  2. url-loader：在文件较小时，可以将文件内容以Base64的格式注入到代码中，从而避免额外的HTTP请求

  3. webpack5将上述两个loader的功能内置到webpack了，只需要配置 type : "asset"即可，对于Base64的处理如下所示：

     {
         test: /\.(png|jpe?g|gif|webp)$/,
         type: "asset",
         parser: {
             dataUrlCondition: {
                 maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
             }
         }
     },
     

• 处理字体图标资源和其他资源

  1. type : "asset/resource"：相当于file-loader，将文件转化成webpack能识别的模块，其他不做处理
  2. type : "asset"：相当于url-loader，小于某个大小的资源会处理成 data URI 形式

• 处理js资源

  1. Eslint：检查代码格式规范

     • 编写配置文件：项目根目录新建.eslintrc.*或直接在package.json中配置eslintConfig

     • 具体配置

       module.exports = {
         // 解析选项
         parserOptions: {},
         // 具体检查规则
         rules: {},
         // 继承其他规则
         extends: [],
         // ...
         // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
       };
       

     • parserOptions解析选项

       parserOptions: {
         ecmaVersion: 6, // ES 语法版本
         sourceType: "module", // ES 模块化
         ecmaFeatures: { // ES 其他特性
           jsx: true // 如果是 React 项目，就需要开启 jsx 语法
         }
       }
       

     • rules规则

       1. "off"或0：关闭规则
       2. "warn"或1：开启规则，使用警告级别，不会导致程序退出
       3. "error"或2：开启规则，使用错误级别，会导致程序退出

       rules: {
         semi: "error", // 禁止使用分号
         'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
         'default-case': [
           'warn', // 要求 switch 语句中有 default 分支，否则警告
           { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
         ],
         eqeqeq: [
           'warn', // 强制使用 === 和 !==，否则警告
           'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
         ],
       }
       

     • extends继承：继承现有规则

       1. eslint:recommended：Eslint官方规则
       2. plugin:vue/essential：Vue-cli官方规则
       3. react-app：React-cli官方规则

       // 例如在React项目中，我们可以这样写配置
       module.exports = {
         extends: ["react-app"],
         rules: {
           // 我们的规则会覆盖掉react-app的规则
           // 所以想要修改规则直接改就是了
           eqeqeq: ["warn", "smart"],
         },
       };
       

     • webpack中使用

       1. 下载依赖

          npm i eslint-webpack-plugin eslint -D
          

       2. 定义Eslint配置文件

          module.exports = {
            // 继承 Eslint 规则
            extends: ["eslint:recommended"],
            env: {
              node: true, // 启用node中全局变量
              browser: true, // 启用浏览器中全局变量
            },
            parserOptions: {
              ecmaVersion: 6,
              sourceType: "module",
            },
            rules: {
              "no-var": 2, // 不能使用 var 定义变量
            },
          };
          

       3. 在webpack.config.js中启用

          const ESLintWebpackPlugin = require("eslint-webpack-plugin");
          
          module.exports = {
              ......
              plugins: [
                  new ESLintWebpackPlugin({
                    // 指定检查文件的根目录
                    context: path.resolve(__dirname, "src"),
                  }),
              ]
          }
          

     • VS Code 中 Eslint插件

       下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决。但此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。可以使用 Eslint 忽略文件解决。在项目根目录新建.eslintignore文件:

       # 忽略dist目录下所有文件
       dist
       

  2. Babel：对js做兼容性处理

     主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

     • 编写配置文件：项目根目录下新建babel.config.*，或直接在package.json中配置babel

     • 具体配置

       module.exports = {
         // 预设
         presets: [],
       };
       

     • presets 预设：就是一组Babel插件，扩展Babel功能

       1. @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
       2. @babel/preset-react：一个用来编译 React jsx 语法的预设
       3. @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

     • webpack中使用

       1. 下载依赖

          npm i babel-loader @babel/core @babel/preset-env -D
          

       2. 定义Babel配置文件

          module.exports = {
            presets: ["@babel/preset-env"],
          };
          

       3. 在webpack.config.js中启用

          {
              test: /\.js$/,
              exclude: /node_modules/, // 排除node_modules代码不编译
              loader: "babel-loader",
          }