webpack学习笔记

1.概述

webpack_是一个现代 JavaScript 应用程序的静态模块打包器,它将根据模块的依赖关系进行静态分析，递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将这些模块按照指定的规则生成对应的静态资源。
个人理解：实质上就是将各种模块之间的依赖关系根据一定的规则进行分解，最后生成对应的非模块化的静态资源，将模块里面所有的js，jsx，scss，vue等根据规则变成最原始的html，css和js则是依赖一些plugins（插件）进行的转换。

2.基本情况

（1）4个核心的概念

1.入口（entry）
指定模块的入口，作为构建的依赖图的开始，可以写多个入口，使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

CommonsChunkPlugin主要是用来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长,详情这篇文章介绍得很清楚https://segmentfault.com/a/11...

module.exports = {
entry: ['./src/index.js']
}

2.出口（output）
告诉 webpack 在哪里输出它所创建的bundles，以及如何命名这些文件

3.注意事项

4.其他