第一章----何为Webpack

webpack 是一个开源的javascript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照制定的规则和顺序组织在一起，最终合并为一个JS文件（有时候有多个）。这个过程就叫做模块打包。

你可以把webpack理解为一个模块处理工厂。我们把源代码交给webpack，由它去进行加工、拼装处理，产出最终的资源文件，等待送往用户。

抛出疑问？-->为什么不直接将工程中的源文件发布到服务器或CDN，而交给webpack处理呢？？

为什么需要webpack？

开发一个简单web应用，只需要浏览器和编辑器，但是应用规模大了之后，就必须借助工具，否则人工维护代码的成本就变得难以接受。学会使用工具可以让开发效率成倍地提升，“工欲善其事，必先利其器”就是这个意思。

javascript中的模块

在过去很长一段时间里，js这门语言并没有模块这一概念。如果工程中有多个js文件，我们只能通过script标签将它们一个个插入页面中。

随着技术的发展，js用来实现的功能场景越来越复杂，我们发现这种做法有很多缺点：

• 需要手动维护JavaScript的加载，页面多个js直接通常有依赖关系但是是隐式的，除了添加注释没有其他办法，也没加载的文件过多时就很容易出现问题。
• 每一个script标签都意味着需要向服务器请求一次静态资源，在http2还没出现的时期，建立连接的成本是很高的，过多的请求会严重拖慢网页的渲染速度。
• 在每个script标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成作用域的污染。

模块化解决了上述的所有问题

• 通过导入和导出语句我们可以清晰地看到模块间的依赖关系。
• 模块可以借助工具来进行打包，在页面中只需要加载合并后的资源文件，减少了网络开销。
• 多个模块之间的作用域是隔离的，彼此不会有命名冲突

模块打包工具

模块打包工具的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种：

• 将存在依赖关系的模块按照特定规则合并为单个js文件，一次全部加载进页面中。
• 在页面初始时加载一个入口模块，其他模块异步地进行加载。

安装

npm init 
接下来执行按照webpack的命令：
--webpack是核心模块，webpack-cli则是命令行工具，在本例中两者都是必需的
npm install webpack webpack-cli --save-dev 

//注意 因为webpack安装在了本地，因此无法直接在命令行内使用“webpack”，
//工程内部只能使用npx webpack <command>的形式  npx webpack -v 查看版本号

打包第一个应用程序

package.json文件中添加：
"scripts": {
    "build":"webpack"    //把一些参数对象放到webpack的默认配置文件中webpack.config.js
  },
    
webpack.config.js文件中添加：
module.exports={
    entry:'./index.js', //入口文件，不过默认的一般是./src/index.js
    output:{
        filename:'bundle.js',
    },
    mode:'development'
}
启动命令 ： npm run build 
抛出一个问题：每次修改都需要执行npm run build 更新bundle.js ，这种太麻烦了。

webpack-dev-server

npm install webpack-dev-server --save-dev
//--save-dev 参数是将webpack-dev-server 作为工程的devDependencies（开发环境依赖）记录在package.json

// webpack-dev-server的2大职能
1、令webpack进行模块打包，并处理打包结果的资源请求
2、作为普通的Web Server，处理静态资源文件请求

启动webpack-dev-server需要配置：
1)package.json 中添加dev指令
"scripts": {
    "dev":"webpack-dev-server"
  }
2)webpack.config.js文件中添加
module.exports={
    devServer:{
        publicPath:'/dist'
    }
}

webpack-dev-server 的作用是启动一个本地服务，可以处理打包资源与静态文件的请求。它的live-reloading功能可以监听文件变化，自动刷新页面来提升开发效率。

第2章----模块打包

模块

CommonJs中规定每个文件是一个模块。将一个JavaScript文件直接通过script标准插入页面中与封装成CommonJs模块最大的不同在于，前者的顶层作用域是全局作用域，在进行变量及函数声明时会污染全局环境；而后者会形成一个属于模块自身的作用域，所有的变量及函数只有自己能访问，对外是不可见的。

导出

导出是一个模块向外暴露自身的唯一方式。在CommonJs中，通过module.exports可以导出模块中的内容。

但下述为ES6方式写模块：caluator.js
export default {
    name: 'caluator',
    add: function (a,b){
        return a+b;
    }
}

导入

在commonJs中使用require进行模块导入。：

但该代码为es6 Module方式，如-->index.js 导入

import caluator from './caluator.js';
console.log(caluator.add(2,4));//6

加载其他类型模块

非模块文件

非模块化文件指的是并不遵循任何一种模块标准的文件。最常见的就是script标签中引入的jQuery及其各种插件。

如果使用webpack打包这类文件呢？其实只要直接引入就行，如：

import './jquery.min.js'

加载npm模块

下面以lodash 这个库为例：
npm install lodash
加载使用，只需要引入包的名字即可：
import _ from 'lodash' 
原理是当加载该模块是，实际上加载的是node_mudules/lodash/lodash.js

除此之外，我们还可以通过path的形式单独家在模块内部的某个js文件。如：
import all from  'lodash/fp/all.js'
这样webpack最终只会打包node_modules/lodash/fp/all.js这个文件，通过这种方式可以减少打包资源的体积。

CommonJs 和ES6 Module 是目前使用较为广泛的模块标准。它们的主要区别在于前者建立模块依赖关系是在运行时，后者是在编译时；在模块导入方面，CommonJs导入的是值拷贝，Es6 Module导入的是只读的变量映射。

webpack打包模块，可以理解为类似于工厂中的产品组装，将一个个零件拼起来得到最终的成品。

第3章----资源的输入输出

本章主要关注资源的输入和输出，即如何定义产品的原材料从哪里来，以及组装后的产品送到哪里去。

第4章----预处理器

webpack “一切皆模块”的思想

loader就像webpack的翻译官。webpack本身只能接受javascript，为了使其能够处理其他类型的资源，必须使用loader将资源转译为webpack能够理解的形式。

在配置loader时，实际上定义的是模块规则（modules.rules），它主要关注两件事：该规则对哪些模块生效（test、exclude、include配置），使用哪些loader（use配置）loader可以是链式的，并且每一个都允许拥有自己的配置项。

loader本质上是一个函数。第一个loader的输入是源文件，之后所有loader的输入是上一个loader的输出。最后一个loader则直接输出给webpack。

第6章----代码分片

实现高性能应用其中重要的一点就是尽可能地让用户每次只加载必要的资源。代码分片（code solitting）是webpack作为打包工具所特有的一项技术，使用户不必一次全部加载，而是按需加载。