webpack学习之路(一):

首先将npm包管理器更新到最新版本:

   npm install npm@latest -g

npm 常用命令集合:

  https://www.cnblogs.com/blackgan/p/7828047.html

以下使用的webpack版本是4.x，如有版本不符合的读者，还请另找原因

  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }

一:什么是 webpack
webpack 可以看做是模块打包机，功能可以分为以下

1: 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
2: 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等自定义文件
3: 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
4: 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
            进行模块化
5: 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
6: 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
7: 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack体现在以下几点：
1：代码分离；
2：装载器（css,sass,jsx等等）；
3：智能解析文件；

知识点：

  入口文件： 默认值是 ./src/index.js，然而，可以通过在 webpack 配置中配置 entry 属性，
  			来指定一个不同的入口起点（或者也可以指定多个入口起点）。
  			
  出口文件：主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist。

  （webpack自身也理解为javascript，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，
  然后你就可以利用 webpack 的打包能力，对它们进行处理。）
  

安装webpack:

  1:全局安装
  npm install webpack -g
  2:局部安装
  npm install webpack --save-dev
  3:卸载全局webpack
  npm uninstall webpack -g
  4:卸载局部webpack，在当前项目目录下
  npm uninstall webpack

二：webpack 和 webpack-cli
通过查询才了解到，在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以在项目局部安装了webpack,运行打包命令时，会出现提示：

其实是以下原因：（意思就是以上的描述）

此时，只要再次安装webpack-cli脚本，就可以正常打包使用了。当然也可以尝试全局安装webpack-cli

  npm install webpack-cli -g

全局安装webpack-cli之后，就可以全局使用webpack的命令，例如

  webpack -h

局部安装webpack-cli

  npm install webpack-cli --save-dev

局部安装之后，运行webpack命令，说明全局安装cli之前webpack寻找不到webpack命令

此时，官方文档中推荐本地安装并且提示，当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。我把webpack-cli全局安装卸载掉，又局部安装的webpack-cli，然后进入路径node_modules/.bin/webpack就可以执行了，如下：

如果退出当前路径环境：

总结：这就意味着如果你webpack和webpack-cli是局部安装的，想要使用webpack命令必须进入node_modules/.bin/webpack才能执行webpack命令，.bin目录包含的是一系列可以执行的命令，但是如果你是全局安装的webpack-cli，就不需要进入bin目录，webpack就能够寻找到它的命令路径了。

三：webpack构建过程
1：从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。
2：每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则。
3：对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
4：这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
5：最后 Webpack 会把所有 Chunk 转换成文件输出。
6：在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。
四：一个项目基本需要哪些安装
1：构建发布需要的 HTML、CSS、JS、图片等资源
2：使用 CSS 预处理器，这里使用 less
3：配置 babel 转码器 => 使用 es6+
4：处理和压缩图片
5：配置热加载，HMR

第一节，先具体学习webpack到这。