webpack篇

[ArthurWangCN]

loader

webpack 默认支持处理 JS 与 JSON 文件，其他类型都处理不了，这里必须借助 Loader 来对不同类型的文件的进行处理。

Loader 就是将 Webpack 不认识的内容转化为认识的内容。

如 安装 css-loader 来处理 CSS

plugins

如果我想打包后的资源文件，例如：js 或者 css 文件可以自动引入到 Html 中，就需要使用插件 html-webpack-plugin

[ArthurWangCN]

Webpack 配置中用过哪些 Loader ？都有什么作用？

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 更多的功能需要借助loaders和plugins完成。比如说：在代码中有一张图片需要进行打包，webpack可以把图片读出来，但是不能将图片当做js代码来读，所以需要一个加载器loader来帮助我们把图片的二进制数据转变为js代码，loader的作用说白了就是将一种形式的代码通过逻辑转变成另一种形式的代码，转换后的代码webpack就能识别了。

Loader 就是将 Webpack 不认识的内容转化为认识的内容。

常见的loader：

• style-loader 将css添加到DOM的内联样式标签style里
• css-loader 加载css，允许将css文件通过require的方式引入，并返回css代码
• less-loader 处理less
• sass-loader 处理sass
• postcss-loader 处理css兼容性，自动添加 CSS3 部分属性的浏览器前缀
• eslint-loader 通过 ESLint 检查 JavaScript 代码
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• autoprefixer-loader 处理CSS3属性前缀，已被弃用，建议直接使用postcss
• file-loader 分发文件到output目录并返回相对路径
• url-loader 和 file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
• html-minify-loader 压缩HTML
• babel-loader 用babel来转换ES6文件到ES5

示例：

const config = {
  // ...
  module: { 
    rules: [
      {
        test: /\.css$/, //匹配所有的 css 文件
        use: ['style-loader','css-loader', 'postcss-loader']
      }
    ]
  },
  // ...
}

由示例得出，loader 支持链式传递，从右向左取值/执行。

[ArthurWangCN]

Webpack 配置中用过哪些 Plugin ？都有什么作用？

• HtmlWebpackPlugin：在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的js 模块引⼊到该 html 中；
• clean-webpack-plugin：删除（清理）构建目录；
• mini-css-extract-plugin：提取 CSS 到一个单独的文件中；
• DefinePlugin：允许在编译时创建配置的全局对象，是一个webpack内置的插件，不需要安装；
• copy-webpack-plugin：复制文件或目录到执行区域，如vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中；
• uglifyjs-webpack-plugin：用来缩小（压缩优化）js文件。

[ArthurWangCN]

Loader 和 Plugin 有什么区别？

1. 两者都是为了扩展webpack的功能。loader它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译; 而plugin不仅只局限在打包，资源的加载上，还可以打包优化和压缩，重新定义环境变量等
2. loader运行在打包文件之前（loader为在模块加载时的预处理文件）；plugins在整个编译周期都起作用
3. 一个loader的职责是单一的，只需要完成一种转换。一个loader其实就是一个Node.js模块。当需要调用多个loader去转换一个文件时，每个loader会链式的顺序执行
4. 在webpack运行的生命周期中会广播出许多事件，plugin会监听这些事件，在合适的时机通过webpack提供的API改变输出结果

[ArthurWangCN]

如何编写 Loader ? 介绍一下思路？

https://blog.csdn.net/Niall_Tonshall/article/details/123082976

[ArthurWangCN]

如何编写 Plugin ? 介绍一下思路？

[ArthurWangCN]

Webpack optimize 有配置过吗？可以简单说说吗？

[ArthurWangCN]

Webpack 层面如何性能优化？

[ArthurWangCN]

Webpack 打包流程是怎样的？

[ArthurWangCN]

tree-shaking 实现原理是怎样的？

功能：移除 JavaScript 上下文中未引用的代码。

CommonJS规范无法确定在实际运行前需要或者不需要某些模块，所以CommonJS不适合tree-shaking机制。

在JavaScript模块化方案中，只有ES6的模块方案：import()引入模块的方式采用静态导入，可以采用一次导入所以的依赖包再根据条件判断的方式，获取不需要的包，然后执行删除操作。

Tree-shaking的实现原理

利用ES6模块特性：

• 只能作为模块顶层的语句出现
• import的模块名只能是字符串常量
• import binding 是 immutable的，引入的模块不能再进行修改

代码删除：

• uglify：判断程序流，判断变量是否被使用和引用，进而删除代码

实现原理可以简单的概况：

• ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
• 静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码

[ArthurWangCN]

Webpack 热更新（HMR）是如何实现？

[ArthurWangCN]

Webpack 打包中 Babel 插件是如何工作的？

[ArthurWangCN]

Webpack 和 Rollup 有什么相同点与不同点？

他们都是JavaScript模块构建打包工具。

特性：

• webpack 拆分代码， 按需加载；
• Rollup 所有资源放在同一个地方，一次性加载，利用 tree-shake 特性来剔除项目中未使用的代码，减少冗余，但是webpack2已经逐渐支持tree-shake

资源：

webpack 相对来说拥有更大的社区支持，资源更加齐全，文档更加完整，有更完整的插件库，如热更新及web-server等。

结论：

• 对于应用使用 webpack，对于类库使用 Rollup
• 如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。
• 如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。

Webpack对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)，而Rollup并不支持，所以当项目需要用到以上，则可以考虑选择Webpack。但是，Rollup对于代码的Tree-shaking和ES6模块有着算法优势上的支持，若你项目只需要打包出一个简单的bundle包，并是基于ES6模块开发的，可以考虑使用Rollup。其实Webpack从2.0开始支持Tree-shaking，并在使用babel-loader的情况下支持了es6 module的打包了，实际上，Rollup已经在渐渐地失去了当初的优势了。但是它并没有被抛弃，反而因其简单的API、使用方式被许多库开发者青睐，如React、Vue等，都是使用Rollup作为构建工具的。而Webpack目前在中大型项目中使用得非常广泛。最后，用一句话概括就是：在开发应用时使用 Webpack，开发库时使用 Rollup。

参考：https://www.cnblogs.com/zuobaiquan01/p/14452270.html

[ArthurWangCN]

Webpack5 更新了哪些新特性？

[ArthurWangCN]

编写loader

在编写 loader 前，我们首先需要了解 loader 的本质：

• 其本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 loader设为一个箭头函数
• 函数接受一个参数，为 webpack 传递给 loader 的文件源内容
• 函数中 this 是由 webpack 提供的对象，能够获取当前 loader 所需要的各种信息
• 函数中有异步操作或同步操作，异步操作通过 this.callback返回，返回值要求为 string 或者 Buffer

代码如下所示：

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function(source) {
  const content = doSomeThing2JsString(source);
  // 如果 loader 配置了 options 对象，那么this.query将指向 options
  const options = this.query;
  // 可以用作解析其他模块路径的上下文
  console.log('this.context');
  /** this.callback 参数：
      * error：Error | null，当 loader 出错时向外抛出一个 error
      * content：String | Buffer，经过 loader 编译后需要导出的内容
      * sourceMap：为方便调试生成的编译后内容的 source map
      * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
  */
  this.callback(null, content); // 异步
  return content; // 同步 
}

一般在编写loader的过程中，保持功能单一，避免做多种功能。如less文件转换成 css文件也不是一步到位，而是 less-loader、css-loader、style-loader几个 loader的链式调用才能完成转换。

[ArthurWangCN]

编写plugin

由于webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务

在之前也了解过，webpack编译会创建两个核心对象：

• compiler：包含了 webpack 环境的所有的配置信息，包括 options，loader 和 plugin，和 webpack 整个生命周期相关的钩子
• compilation：作为 plugin 内置事件回调函数的参数，包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化，一次新的 Compilation 将被创建

如果自己要实现plugin，也需要遵循一定的规范：

• 插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问compiler实例
• 传给每个插件的 compiler 和 compilation 对象都是同一个引用，因此不建议修改
• 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住

实现plugin的模板如下：

class MyPlugin {
  // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
      // compilation: 当前打包构建流程的上下文
      console.log(compilation);
      // do something...
    })
  }
}

在 emit 事件发生时，代表源文件的转换和组装已经完成，可以读取到最终将输出的资源、代码块、模块及其依赖，并且可以修改输出资源的内容