《深入浅出webpack》阅读笔记（一）

一、基础入门

首先主要了解webpack时做什么的？我们为什么要使用webpack？基础的安装与使用，以及常用的构建工具的介绍与对比。

1、前端发展现状

为了应对复杂而强大的web应用，前端社区出现了许多新的框架与思想

• 模块化

     模块化是指将一个复杂的系统分解为多个模块从而方便编码。
  

  （1）commonJS是一种被广泛使用的JavaScript模块化规范，核心思想是通过通过使用require的方法来同步加载依赖的其他模块。然后使用module.exports导出。
  采用commonJS导入导出的代码实例如下：

  //导入
  const moduleA = require('./moduleA');
  //导出
  module.export = moduleA.someFunc;
  

  优点：commonJS的代码可以复用于Node.js环境下并运行；通过npm发布的第三模块均采用CommonJS的规范。
  缺点：代码无法直接运行在浏览器环境下，需要转换成标准的ES5。
  （2）AMD一种JavaScript模块化规范，采用异步的方式加载依赖的模块，主要用于解决针对浏览器环境的模块化问题。
  采用AMD导入及导出的代码如下：

  //定义一个模块
  define('module' , ['dep'] , function(dep)){
  	return exports;
  	});
  //导入和使用
  require([ 'module' ], function(module){
  	});
  

  优点：可以在不转换代码的情况下直接运行；可以异步加载依赖；代码可以运行在浏览器环境和Node.js环境下。
  缺点：JavaScript运行环境没有原生支持AMD，需要先导入实现了AMD的库后才能正常使用。
  （3）ES6模块化在语言层面实现可模块化，其将逐渐取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
  采用ES6模块化导入和导出的代码如下：

  //导入
  import { readFile } from 'fs';
  import React from 'react';
  //导出
  export function hello () {};
  export default {
      // ...
  }
  

  缺点无法直接运行在大部分JavaScript运行环境下，必须通过工具转换成标准的ES5后才能正常运行。
  （4）样式文件中的模块化除了JavaScript开始进行模块化改造外，样式文件也支持了模块化。

• 新框架

  （1）React：引入可JSX语法到JavaScript语言层面中，可以更加灵活地控制视图的渲染逻辑。该语法需要转换才能运行在JavaScript引擎中。
  （2）Vue：将于组件相关的HTML模板，JavaScript逻辑代码，CSS样式代码都写下一个文件中。
  （3）Angular2：推崇才哟并Typescript语言开发应用，并且可以注解语法描述组件的各个属性。

• 新语言

  为了解决JavaScript在开发大型应用时的语言缺陷，同时解决CSS无法增加逻辑判断与共享变量的问题，出现了许多新的语言。
  （1）ES6：引入了很多新的语法如：规范模块化、Class语法、使用let声明变量，使用const声明常量、箭头函数、async函数、Set和Map数据结构等等。缺点是存在兼容性问题，需要将ES6转换成ES5，Babel是目前解决这个问题的优秀工具。
  （2）Typescript：JavaScript的一个超集，除了支持ES6的所有功能，还提供了静态类型检查，在编写大型应用时，不同的模块可能由不同的人编写，在对接不同的模块时，静态类型检查会在编译阶段找出可能存在的问题。缺点：无法再浏览器或Node.js环境下直接运行。
  （3）Flow：主要特点也是为JavaScript提供静态类型检查。
  （4）SCSS：CSS预处理器，可以方便的管理代码，抽离公共部分，写出更加灵活的代码，相似的还有less。

2、 常见的构建工具对比

问题： 各种框架和新思想层出不穷，但是他们存在一个共同的问题：源代码无法直接运行，必须通过转换后才可以正常的运行。

如何解决：构建就是为了解决上述问题而存在的，将源代码转换成可以执行的JavaScript、CSS、HTML代码。主要包括如下几项工作：代码转换、文件优化（压缩代码文件）、代码分割（提取公共代码，提取首屏不需要加载的代码让其异步加载）、模块合并、自动刷新（监听本地源代码的改变，自动重新构建和刷新）、代码校验、自动发布

那么什么是构建？
构建是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化的执行这一系列复杂的流程。
大多数构建工具是通过Node.js 开发的，下文简要介绍几种常用的构建工具。

• Npm Script

  Npm Script是一个任务执行者，npm是node的包管理器，npm script则是npm内置的一个功能，允许在package.json文件中使用script字样定义任务。

  {
  "scripts" : {
  	"dev" : "node dev.js",
  	"pub" : "node build.js"
    }
  }
  

  优点：内置，无需安装其他依赖，
  缺点：功能太简单

• Grunt

  Grunt也是一个任务执行者，有大量的插件封装了常见的任务，也能管理任务之间的依赖，自动化的执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js中。
  优点：灵活，只负责执行定义的任务，大量的可复用插件封装了常见的构建任务
  缺点：集成度不高，要写很多配置才可以用，无法做到开箱即用。

• Gulp

  Gulp是一个基于流的自动化构建工具，除了可以管理和执行任务，还支持监听文件、读写文件。
  优点：灵活，可以单独完成构建，也可以和其他工具搭配使用。
  缺点：集成度不高，要写很多配置才可以用，无法做到开箱即用。

• Fis3

  集成了常用的构建功能：读写文件、资源定位、文件指纹、文件编译、压缩文件、图片合并。
  缺点：目前官方不再更新和维护，不支持最新版本的Node。

• Webpack

  Webpack是一个打包模块化JavaScript的工具，在Webpack中一切文件皆模块，通过loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
  JavaScript、CSS、SCSS、图片、模板等对webpack而言都是模块，经过webpack的处理最终会输出浏览器能够使用的静态资源。
  使用方法如下：

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

  优点：专注于处理模块化的项目，做到开箱即用、一步到位；可以通过plugin扩展；使用场景不局限于web开发；社区庞大活泼；良好的开发体验。
  缺点：只能用于采用模块化开发的项目。

• Rollup

  Rollup是一个专注于ES6的模块打包工具。能针对ES6源码进行tree shaking，去除那些已被定义但是未被使用的代码，并进 行 Scope Hoisting，以减小输出文件的大小和提升运行性能。

  为什么选择webpack
  （1）大部分技术团队采用“模块化+新语言+新框架”，webpack可以为这些新项目提供一站式的解决方案。
  （2）Webpack有良好的生态量和维护团队。
  （3）webpack已被大量开发者使用和验证。

3、webpack安装教程

在执行构建任务时需要webpack的可执行文件启动构建任务，所以需要安装webpack可执行文件，在为项目添加构建之前，需要新建一个web项目。

• 安装webpack到本项目

  //是npm install --save-dev的缩写，安装模块保存到packages.json的devDependencies
  #npm i -D 
  //安装最新版本的webpack
  #npm i -D webpack    
  //安装指定版本
  #npm i -D webpack@<version>
  //安装最新的体验版本
  #npm i -D webpack@beta
  

  运行方式：在项目根目录对应的命令行里通过node_modules/./bin/webpack运行webpack的可执行文件。

• 安装webpack到全局

  将webpack安装到全局后，我们可以在任何地方公用一个webpack可执行文件，不需要重复安装

  #npm i -g webpack
  

  推荐安装到本项目，可以放置不同的项目因依赖不同版本的webpack而出现冲突。

• 使用webpack

  （1）创建项目，相关的目录结构，文件以及内容。需要调整package.json文件，确保安装包是私有的，移除main入口。
  package.json文件的内容如下：

  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
  	"build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  },
  "dependencies": {}
  }
  

  （2）随后可以使用npm run build命令进行构建。
  webpack是一个打包模块化JavaScript工具，会从入口文件main.js出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有依赖打包到一个单独的文件中。