webpack打包知识点总结

webpack打包知识点总结

1.webpack 是一个模块打包工具，能够从一个需要处理的 JavaScript 文件开始，构建一个依赖关系图（dependency graph），该图映射到了项目中每个模块，然后将这个依赖关系图输出到一个或者多个 bundle 中。

2.关键概念：
entry：项目入口
module：开发中每一个文件都可以看做 module，模块不局限于 js，也包含 css、图片等
chunk：代码块，一个 chunk 可以由多个模块组成
loader：模块转化器，模块的处理器，对模块进行转换处理
plugin：扩展插件，插件可以处理 chunk，也可以对最后的打包结果进行处理，可以完成 loader 完不成的任务
bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle 就是对 chunk 进行便意压缩打包等处理后的产出

3.Loader 解析顺序是从右到左（从后到前）的

4.三大主流模块规范
CommonJS、AMD 和 ES6 Module

①CommonJS：node.js、服务器、同步，使用require来导入一个模块，module.exports导出模块

// sayhi.js
var hi = 'hello world';
function sayHi() {
    return hi;
}
module.exports = sayHi;
// index.js
var sayHi = require('./sayhi.js');
console.log(sayHi());

②AMD：浏览器、异步，使用require()：引入其他模块；define()：定义新的模块

// sayhi.js
define(function() {
    var hi = 'hello world';
    return function sayHi() {
        return hi;
    };
});
// index.js
require(['./sayhi.js'], function(sayHi) {
    console.log(sayHi());
});

③ES6 Module，不仅仅在 Web 现代浏览器（例如 Chrome）上面得到实现，而且在 Node.js 9+ 版本也得到原生支持（需要加上--experimental-modules使用）

// sayhi.js
const hi = 'hello world';
export default function sayHi() {
    return hi;
}
// index.js
import sayHi from './sayhi';
console.log(sayHi());

4.Webpack生成bundle的hash值有三种：

①hash：每次编译 Compilation 对象的 hash，全局一致，跟单次编译有关，跟单个文件无关，不推荐使用；
②chunkhash：chunk 的 hash，根据不同的 chunk 及其包含的模块计算出来的 hash，chunk 中包含的任意模块发生变化，则 chunkhash 发生变化，推荐使用；
③contenthash：CSS 文件特有的 hash 值，是根据 CSS 文件内容计算出来的，CSS 发生变化则其值发生变化，推荐 CSS 导出中使用。

5.在 Webpack 中，总共提供了三种方式来实现代码拆分（Code Splitting）：

①entry 配置：通过多个 entry 文件来实现；
②动态加载（按需加载）：通过写代码时主动使用import()或者require.ensure来动态加载；
③抽取公共代码：使用splitChunks配置来抽取公共代码。