11. webpack的作用及核心配置

[JayFate]

11. webpack的作用及核心配置

[JayFate]

进阶（具备手撸一个loader、plugins的能力）：

[JayFate]

13.手写 webpack loader

https://zhuanlan.zhihu.com/p/104205895
本质上来说，loader 就是一个导出为一个函数的 node 模块。
loader 的调用顺序：从下往上或者从右往左。

// a-loader.js
import { getOptions } from 'loader-utils';
import { validateOptions } from 'schema-utils';

const schema = {
  type: object,
  properties: {
    test: {
      type: string
    }
  }
}

export default function(source) {
    const options = getOptions(this);

    validateOptions(schema, options, 'Example Loader');

    // 在这里写转换 source 的逻辑 ...
    return `export default ${ JSON.stringify(source) }`;
};

// webpack.config.js
let webpackConfig = {
    //...
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                //这里写 loader 的路径
                loader: path.resolve(__dirname, 'loaders/a-loader.js'), 
                options: {/* ... */}
            }]
        }]
    }
}

14.手写 webpack plugin

本质上来说，plugin 就是一个JavaScript类函数，在该函数原型 (prototype)中定义了一个注入compiler对象的apply方法。

class MyPlugin{
    constructor() {

    }
    apply(conpiler){
        conpiler.hooks.break.tap("WarningLampPlugin", () => console.log('WarningLampPlugin'));
        conpiler.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
        conpiler.hooks.calculateRoutes.tapAsync("calculateRoutes tapAsync", (source, target, routesList, callback) => {
            setTimeout(() => {
                console.log(`tapAsync to ${source}${target}${routesList}`)
                callback();
            }, 2000)
        });
    }
}

[JayFate]

webpack5.0源码整体流程 https://juejin.cn/post/6919883483913388040

[JayFate]

https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md

[JayFate]

webpack5 启动流程部分源码分析 https://www.jianshu.com/p/a38cdd547f04

[JayFate]

从构建进程间缓存设计 谈 Webpack5 优化和工作原理 https://segmentfault.com/a/1190000021918701

[JayFate]

sourcemap原理与作用

编译源码生成编译后的代码和SourceMap，SourceMap有内联形式或者单独的.map文件，SourceMap的内容是一个json对象，记录了压缩处理后的代码与源码之间的映射关系

在webpack中选择合适的SourceMap能达到打包速度和生成包体积、方便调试之间的平衡。

[JayFate]

掘金刘小夕的webpack系列

[JayFate]

如何使用 splitChunks 精细控制代码分割

[JayFate]

深入浅出 Webpack5