面经 | webpack

• 你怎么分析你的打包速度？speed-measure-webpack-plugin插件。
• 

webpack

一个打包工具，就和npm是一个包管理工具差不多。一般在项目文件中，通过webpack.config.js来配置。

loader

本质上是一种函数，作用是处理源文件。你比如，ts-loader，就是一个把ts转换成js的函数。其他常见的img-loader类似，也不是说一定就是做一个翻译，其实就理解成一个函数就行，函数做什么事情，看函数逻辑呗。所以，其实我们自己也可以自定义loader。

这篇文章写得很好，忘了可以看这个。loader

基本语法

就是module中rules里面配置loader。test指定文件，use指定要使用的loader;

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {test: /\.ts$/i, use: "ts-loader"}
        ],
    },
};

rules

• rules是数组，执行顺序是从右到左。理解成数组的pop / 栈执行顺序；
  • rules:[loaderObj1,loaderObj2,loaderObj3]; 执行顺序就是 3 2 1；
  • 也可以通过enforce配置顺序；pre-normal-inline-post； 很好记， inline就是排队的意思，pre-post就是最前最后呗。
  • 

自定义loader

• 说了loader是一个函数，所以你可以自己新建一个文件，自定义loader函数： 然后在rules中引入就行了; （其实也可以在需要的其他文件中引入）
• this.query 和 this.callback；
  • 去搜loader函数，很容易在函数中看到这样两行

let options=this.query; 
// ...
this.callback(null,content,map,meta);

• this.query就是在获取你配置的{key:‘value’},如下图; // 要配置options的话，只能是一个对象；//
• 函数返回可以通过调用return 返回，也可以通过调用this.callback返回，好处就是this.callback可以传递多个参数给下一个loader，return 只能传递当前loader转换后的content给下一个loader;
• callback也可以分为同步和异步；对应也就是同步loader和异步loader;
  • 同步就是this.callback(…args)
  • 异步就是let callback=this.async(); callback(…args);
    

你可以写哪些loader？

• clean-log-loader:清除日志等等的吧

常见loader

• babel-loader:es6->es5;
• ts-loader:ts -> js
• less-loader:less->css

plugin

大部分都是说功能比plugin强大，感觉强大就强大在可以监听webpack构建的生命周期，更加灵活地去操作资源。loader只是作用在出包前，更多地，只作用于文件，类似翻译功能什么的，plugin可以进行类似共同代码提取等等的。

webpack生命周期 参考

• 简单来说：初始阶段-编译-构建-优化-产出-完成
• plugin中的函数监听钩子函数

常见plugin

• HtmlWebpackPlugin：把打包的js文件，自动引入到插件创建的html文件
  • 必要性：不用你手动去引入；
• copy-webpack-plugin： 复制文件或者目录到指定的路径下；

module bundle chunk

module 项目中的每个文件
bundle 根据个文件的依赖关系打包出来的各个代码文件
chunk bundle中的代码经过加载和编译，能直接在浏览器中运行的最终文件