高级前端软件工程师知识整理之打包篇

1. 简单介绍一下webpack有哪些配置？

以目前最新版本4.29.6为例，webpack的基本配置包括：

配置	描述
context	基础目录，绝对路径，用于从配置中解析入口起点entry和loader
entry	起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。 关于命名规则，如果传入一个字符串或字符串数组(entry:[hot.js, index.js])，chunk 会被命名为 main，chunk是指build打包成功后的js文件，如react技术栈中打包出来的 main.js。如果传入一个对象(entry:{index: index.js})，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点，如 index.js。
output	位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。常见配置项有： 【path】输出目录，对应一个绝对路径，表示打包文件存放的地址。 【filename】此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。 如对于单个入口起点，filename 会是一个静态名称filename: "bundle.js"；当包括多个入口文件，可以使用[name].bundle.js、[id].bundle.js等设定唯一文件名称。 【chunkFilename】此选项决定了非入口(non-entry) chunk 文件的名称，这些文件名需要在 runtime 根据 chunk 发送的请求去生成。 【publicPath】对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。在多数情况下，此选项的值都会以/结束，对应的是项目中public目录。
optimization	从插件webpack.optimize.CommonsChunkPlugin独立出来的模块，通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
module	这些选项决定了如何处理项目中的不同类型的模块或文件。常见配置项有： 【strictExportPresence】是否将丢失的模块报出错误而不是警告。 【rules】创建模块时，匹配请求的规则数组。这些规则通常是模块(module)应用 loader，或者修改解析器(parser)。简而言之，就是实现模块文件的转换。
plugins	插件选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。如代码压缩、添加代码抬头注释等。
resolve	resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，所依赖的模块可以是来自应用程序代码或第三方的库(library)。常见配置项有： 【alias】创建 import 或 require 的别名，来确保模块引入变得更简单。如配置'@': path.resolve(__dirname, '../src')，当在import中引入文件时，@就表示根路径。 【extensions】自动解析确定的扩展，能够使用户在引入模块时不带扩展。 【modules】告诉 webpack 解析模块时应该搜索的目录。 【plugins】应该使用的额外的解析插件列表。
resolveLoader	resolve 对象的属性集合相同，但仅用于解析 webpack 的 loader 包。
devtool	打包后调试代码的工具，生产环境应该设为none
mode	当前环境，是开发development还是生产production。

其它更详细配置可以查看 https://www.webpackjs.com/configuration/

2. plugin和loader的区别是什么？使用过webpack里面哪些plugin和loader？

主要区别：

• loader 主要用于转换某些资源文件。loader描述了webpack如何处理非javascript模块，并且在编译中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为dataURL（如Base64）。
• plugin用于扩展webpack的功能，同时也补充了loader的不足。目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

这个答案因人而异，如：

• sass-loader，在react脚手架中，已经集成到loaders配置，只需要初始化即可使用。npm install node-sass。
• stylus-loader，需要自己配置，功能跟sass-loader差不多。
• BannerPlugin，给压缩的代码添加抬头注释。
• CommonsChunkPlugin，打包时提取公共代码。在webpack4.x中已经被设置成一个单独的配置optimizatio

3. webpack里面的插件是怎么实现的？

webpack 插件只需添加到plugin配置项中即可实现，如：

const MyPlugin = require('myplugin')
const webpack = require('webpack')

webpack({
  ...,
  plugins: [new MyPlugin()]
  ...,
})

如自定义插件实现打包成功后生成一个文件filelist.md来显示文件列表：

function FileListPlugin() {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin('emit', function(compilation, callback) {
    // 在生成文件中，创建一个头部字符串：
    var filelist = 'In this build:\n\n';
    
    // 遍历所有编译过的资源文件，
    // 对于每个文件名称，都添加一行内容。
    for (var filename in compilation.assets) {
      filelist += ('- '+ filename +'\n');
    }

    // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
    compilation.assets['filelist.md'] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();
  });
};

module.exports = FileListPlugin;

如果想更深入了解插件，可以看看这篇文章《探寻 webpack 插件机制》

4. 打包时Hash码是怎么生成的？

webpack打包出来的文件名称组成通常是[name].[hash码].后缀名，hash码的生存有三种方式：

• hash。属于工程级别，所有打包出来的文件hash码都一样，只要一个文件修改，则所有文件的hash码也都会修改，这种hash码生存不利于缓存文件。
• chunkhash。入口级别，chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。可以理解为只要同一入口的文件，其生成的js和css文件hash码是一样的，只要一个改变另一个也会跟着改变，比如我只改变内容，不想改变样式，但实际上打包出来的文件名称都发生变化，不利于实现样式缓存。
• contenthash。内容级别。由文件内容产生的hash值，内容不同产生的contenthash值也不一样，每个文件的hash都是独一无二的。目前最新版本的React脚手架技术栈就是使用这种方式打包，如：

filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',