体验webpack

webpack是一个打包模块化js的工具，
在webpack里一切文件皆模块.
通过loader转换文件，通过plugin注入钩子，
最后输出由多个模块组合成的文件，webpack专注构建模块化项目。
分析项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TS等，并将其打包为合适的格式以供浏览器使用。

安装

cnpm i webpack webpack-cli --save-dev //开发阶段
cnpm i qs lodash --save  //产品阶段

webpack核心:

配置webpack：
	entry:"项目入口文件",
	output:"输出文件",

• 插件 plugins:[];

  1.htmlWebpackPlugin 自动生成打包后的html文件 自动引入打包好的脚本文件
  2.webpack-bundle-analyzer 可视化图形插件 分析模块化大小
  3.splitChunks 抽离公共重复的依赖 单独放在一个脚本文件 优化前端性能

• chunk：代码块，一个chunk由多个模块组合而成， 是由webpack打包出来的文件,用于代码的合并和分割

• module：是开发中的单个模块，在webpack的世界， 一切皆模块，一个模块对应一个文件, webpack会从配置的entry中递归开始找出所有依赖的模块

• loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。

• webpack 本身只能解释js文件
  loader 解释非js文件 sass css png … 模块化

loader plugin