webpack进阶之路一、（介绍到安装及简单使用）

一、为什么要用webpack？

1. 模块化开发

指将一个复杂的系统分解为多个模块以方便开发和修改。
好处有：

1. 避免变量污染，命名冲突
2. 提高代码复用率
3. 提高维护性
4. 依赖关系的管理

2. 模块化开发规范介绍

CommonJS、AMD、ES6等
CommonJS(CommonJS官网)的核心思想是通过require方法来同步加载依赖的其它模块，通过module.exports导出需要暴露的接口。例如：

// 导入
const moduleA = require('./moduleA');
// 导出
module.exports = moduleA.func;

优点：

node.js环境下可以使用
具有模块化开发的强大封装功能
npm上发布的很多包采用CommonJS规范

缺点：

无法直接在浏览器环境下运行（需要转化成ES5）
没有模块系统

ES6模块化是国际标准化组织ECMA提出的js模块化规范，目前主流的模块化规范，浏览器和服务器通用的模块解决方案。
es6的代码：

// 导入
import { readFile } from 'fs';
import Vue from 'vue'
// 导出
export function test() {};
export default {
};

目前有些版本的浏览器依旧不兼容es6，所以一般还是通过工具转化成标准的es5。

ECMAScript6.0是JavaScript语言下一代标准。它在语言层面为JavaScript引入了很多新语法和API，例如：

规范模块化
Class语法
用let声明代码块内有效的变量，用const声明常量
箭头函数
async函数
Set和Map数据结构。

具体可以参考（es6的一些新特性）：https://blog.csdn.net/qq_33599109/article/details/83313127

构建工具
各种可以提高开发效率的新思想和框架层出不穷，但他们都有一个共同点：源码无法直接运行，必须通过转换后才可以正常运行。所谓的构建就是做这样的事情，将源代码转换为可执行的JavaScript、CSS、HTML代码。

• 代码转换：将TypeScript编译成JavaScript、将SCSS、LESS编译成CSS等。
• 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码，提取首屏不需要执行的部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
• 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
  构建体现的前端思想是：工程化、自动化，通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作能力以及开发体验。

3. 为什么选择webpack？

webpack是一个打包模块化JavaScript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件

一切文件如JavaScript、CSS、SCSS、图片、模板，对于webpack来说都是一个个模块，这样的好处是能清晰地描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包。经过Webpack的处理，最终会输出浏览器能使用的静态资源。
Webpack具有很大的灵活性，能配置处理文件的方式，使用方式如下：

module.exports = {
	// 所有模块的入口，Webpack从入口开始递归解析出所有依赖的模块
	entry: './app.js',
	output: {
		// 将入所依赖的所有模块打包成一个文件bundle.js输出
		filename: 'bundle.js'
	}
}

Webpack的优点是：

• 专注于处理模块化的项目，能做到开箱即用、一步到位；
• 可通过Plugin扩展，完整好用又不失灵活；
• 使用场景不局限于Web开发；
• 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源的扩展；
• 良好的开发体验。
• 模块化+新语言+新框架

二、安装Webpack

• 新建一个项目，通过npm init来初始化最简单的采用模块化的开发的项目。
• # npm i webpack -D （npm install webpack --save-dev）安装最新的稳定版的webpack，指安装并保存到package.json的devDependencies
• npm i -D webpack@，安装指定版本的webpack。npm i -D webpack@beta 安装最新的体验版本。
• npm i webpack -g 安装webpack到全局，我们可以在任何地方共用一个Webpack可执行文件，而且不用各个项目重复安装。
  webpack练习一：安装使用webpack
  webpack练习二：使用webpack的Loader机制
  webpack练习三：使用webpack的Plugin

三、使用DevServer

目前，我们已经可以让webpack正常运行起来，我们可能更喜欢使用HTTP服务，监听文件变化自动刷新页面等，此时我们需要使用DevServer，DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动Webpack，并接收Webpack发出的变更信号，通过WebSocket协议 自动刷新网页，做到实时预览。
webpack练习四：使用DevServer

四、概念

• Entry: 入口，Webpack执行构建的第一步将熊Entry开始，可抽象成输入。
• Module：模块，在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
• Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
• Loader：模块转化器，用于将模块的原内容按照需求转换成新内容。
• Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或做我们想要的事情。
• Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。

参考链接：
https://webpack.js.org/
https://www.jianshu.com/p/c979126e68aa
https://segmentfault.com/q/1010000013564212
https://www.cnblogs.com/jice1990/p/5435419.html
参考书籍：《深入浅出Webpack》

作者：rookie.he（kuke_kuke）
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！