webpack知识点总结

webpack知识点总结

一、什么是loader

loader的本质是一个函数，该函数对接收到的内容进行转换，返回转换后的结果。因为webpack只认识js文件，所以使用loader对其他类型的文件进行预处理，然后进行打包。

二、常见的loader

• file-loader: 用来将一些文件处理（主要是处理文件名、地址和解析url）后，将文件移动到输出的目录中，通常和url-loader搭配使用。
• url-loader：与file-loader功能类型，如果文件小于限制的大小返回base64编码，否则使用file-loader将文件移动到输出目录。

// webpack.config.js
module.exports = {
  // 省略其它配置 ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  }
}

• babel-loader：将ES6/7/8的语法转换成ES5的语法
• css-loader：加载CSS，支持模块化，压缩和文件导入
• style-loader：把CSS注入到js代码中去，通过DOM加载CSS
• less-loader：将Less代码转换为CSS代码
• eslint-loader：检查JS语法

三、什么是plugin

plugin：插件，可以扩充webpack的功能。在webpack运行的生命周期中会广播出很多事件，那么plugin可以监听这些事件，然后改变输出结果。

四、常见的plugin

• html-webpack-plugin：创建html文件
• uglifyjs-webpack-plugin：压缩代码，删除无用代码
• mini-css-extract-plugin：将CSS单独提取出一个文件
• clean-webpack-plugin：在打包前清空上次打包残留的文件
• webpack-dev-server：用来热更新

五、webpack构建流程

1.初始化：启动构建，读取配置参数
2.开始编译：用上一步得到的参数初始化Compiler对象，加载plugin，开始编译
3.确定入口：根据配置中的 entry 找出所有的入口文件
4.编译模块：从入口文件出发，调用相应的loader对模块进行编译。再找出模块依赖的模块进行递归编译
5.完成编译：完成所有模块编译后得到模块间的依赖关系
6.输出资源：根据入口文件和模块间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表

六、webpack优化

1.缩小文件搜索范围

• alias：使用别名，为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找
• include exclude：同样可以减少查找时间

2.tree shaking

使用uglify-plugin压缩，去除无用代码

目前在webpack4 我们设置mode为production的时候已经自动开启了tree-shaking。但是要想使其生效，生成的代码必须是ES6模块。不能使用其它类型的模块如CommonJS之流。如果使用Babel的话，这里有一个小问题，因为Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型，这样会导致tree-shaking失效。修正这个问题也很简单，在.babelrc文件或在webpack.config.js文件中设置modules： false就好了

3.优化代码压缩时间

使用webpack-parallel-uglify-plugin 增强代码压缩

参考博文：
[1]: 吐血整理,再来一打Webpack面试题
[2]: 2021年我的前端面试准备
[3]: 2020年了,再不会webpack敲得代码就不香了(近万字实战)