webpack

webpack构建过程

1、启动webpack时，会生成compiler对象（该对象在webpack关闭前会一直存在），然后初始化配置的各种参数（如entry、output 等）。
2、开始构建过程：compiler会生成compilation对象，compilation 掌管本次构建过程，分为编译解析阶段、封装阶段、产物输出阶段。
3、编译阶段：会调用loaders对相应的资源进行转译及处理，使得能够被webpack识别（webpack只能识别js 、json 文件）并正确构建。此外，处理模块间依赖，生成模块依赖图。
4、封装阶段：根据解析完的模块依赖图，生成chunk图，在此阶段可对chunk进行拆分等优化。
5、输出阶段：将处理的模块转为webSource，并生成runtime代码，最后输出到对应目录。

构建时长优化

主要是从代码体积、代码打包过程进行优化。

代码体积

减少打包的文件大小
1、对图片可通过image-webpack-loader 等进行压缩。
2、多个文件共同引用了的代码可通过splitChunk进行优化，第二次解析时使用第一次的缓存。
3、对于一些不常用的库可通过DLLPlugin进行打包，webpack 打包时会去相应的文件查看哪些打包过了，然后就会跳过编译，直接使用打包过的代码。
4、按需加载，可通过import动态引入，减少本次加载的代码量。
5、通过include、exclude等只对特定的文件进行打包。
6、代码压缩（只用于生产环境）。

打包过程

1、对loader进行缓存，如cache-loader
2、并行打包，如happypack。单线程变为多线程

手写loader

loader是个函数，参数包括文件内容，sourcemap，上个loader传递过来的参数。
用户如果要给loader传递外部参数，需通过json文件配置参数名，参数类型等，使用根据格式进行传参。

//loader.js文件
const schema = require('./schema.json');
module.exports =  function(content) {
    // 获取匹配schema规则的文本
    const options = this.getOptions(schema);
    return options.author + content;
}
// json配置文件
{
    "type": "object",
    "properties": {
        "author": {
         "type": "string"
        }
    }
}
// webpack.config.js 配置文件
 {
     test: /\.js$/,
     loader:  './loaders/bannerLoader.js',
     options: {
         author: 'xiaoli'
     }
 },

手写plugin

plugin用于扩充webpack功能，通过将插件注入到webpack的钩子中，对打包不同阶段进行处理。

class AnalysisPlugin {
    apply(compiler) {
        compiler.hooks.emit.tap('AnalysisPlugin', (compilation) => {
            const assets = compilation.assets;
            let content = `| 资源名称 | 资源大小 |`;
            let size = 0
            // key是路径，value是内容
            Object.entries(assets).forEach(([filename, file]) => {
                content += `\n| ${filename} | ${file.size()} |`;
                size += file.size();
            });
            compilation.assets['analysis.md'] = {
                source() {
                    return content;
                },
                size() {
                    return size;
                }
            } 
        })
    }
}
module.exports = AnalysisPlugin;

另附讲解webpack运行时的一篇文章：runtime运行时