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
配置来抽取公共代码。