webpack学习

webpack是一种前端资源构建工具，一个静态模块打包器

可以做的事情：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
`前端模块化：AMD、CMD、CommonJS、ES6

CommonJS：  module.exports= ｛｝
            const ｛｝ = require（'../..'）
ES6:        export const key = 'value'
            import { key } from '../..'`

安装

• 安装webpack首先要安装node.js，node.js自带了软件包管理工具npm
• 查看node版本 node -v
• 全局安装webpack（先指定3.6.0版本，因为vue cli2依赖该版本） npm install webpack@3.6.0 -g
• 局部安装webpack（后续才需要）
  --save-dev是开发时依赖，项目打包后不需要继续使用
• 为什么全局安装后还需要局部安装呢？
  在终端直接执行webpack命令，使用的是全局安装的webpack
  当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部的webpack

使用

• 创建一个webpack.config.js文件
• npm init 生成package.json文件
• npm install 按照package.json里的依赖 再生成一个package-lock.json文件
• package.json文件里的scripts中 添加"build":"webpack" npm run build就可以打包

开发时依赖 和 运行时依赖

npm install  webpack@3.6.0 --save-dev
开发时依赖---devDependencies（开发时用到）
运行时依赖---dependencied（项目打包完需要用）

真实开发中，有一个本地webpack包，要是你全局安装的版本跟本地不一致，并且在终端输入webpack命令进行打包，那么会报错；但是执行npm run build则不会，因为这样会优先在node_modules里找（用的是本地的webpack），如果找不到才会使用全局的webpack，；所以想使用本地的可以进入：node_modules/.bin/webpack

5个核心概念

1. entry
   入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
2. output
   输出指示webpack打包后的资源bundles输出到哪里去，以及如何命名
3. loader
   让webpack能够去处理那些非js文件（webpack自身只理解js）
4. plugins
   插件可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩、一直到重新定义环境中的变量
5. Mode
   模式指示webpack使用相应模式的配置
   development---能让代码本地调试运行的环境
   production-----能让代码优化上线运行的环境

构建流程

1. 初始化参数：从配置文件中读取和合并参数，得出最终的参数
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3. 确定入口：根据配置中的 entry 找出所有的入口文件
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统