webpack

1.为什么要使用使用webpack

用模块化的思想来组织代码.

如果不用webpack,按照之前的习惯,去用相对路径引入文件,如:jQuery.

a.jQuery是把方法暴露在全局的,会造成变量名冲突.如jQuery和zpto对外暴露的都是window.$

b.如果包之间有以来关系,无法控制引入的顺序

c.无法管理引入的包的依赖和版本

2.模块化

commonJs: module.exports导出,require导入

 

AMD: define定义, require导入和使用

 

es6: export default 导出, import 导入

 

3.各种构建工具

npm script

grunt

glup

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

 
4.安装webpack

a.安装5.0以上的node.js

b.npm i -D webpack(安装到本地)

　npm i -g webpack(安装到全局)

c.配置webpack.config.js: Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};
文件最后需要通过 CommonJS 规范导出一个描述如何构建的 Object 对象。

5. 使用loader
 a. Webpack 不原生支持解析 CSS 文件,要支持非 JavaScript 类型的文件，需要使用 Webpack 的 Loader 机制
 b. style-loader, css-loader?minimize
 注: Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。 如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 在配置 Loader 时需要注意的是：

use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；

每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

给 Loader 传入属性的方式除了有 querystring 外，还可以通过 Object 传入

6.使用plugin
Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现.
Webpack 是通过 plugins 属性来配置需要使用的插件列表的。 plugins 属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

7.dev-service
提供 HTTP 服务而不是使用本地文件预览

DevServer 会把 Webpack 构建出的文件保存在内存中，在要访问输出的文件时，必须通过 HTTP 服务访问。 由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性，所以要获取 bundle.js 的正确 URL 是 http://localhost:8080/bundle.js，对应的 index.html 应该修改

在启动 Webpack 时通过 webpack --watch 来开启监听模式
模块热替换默认是关闭的，要开启模块热替换，你只需在启动 DevServer 时带上 --hot 参数，重启 DevServer 后再去更新文件就能体验到模块热替换的神奇了
调试工具可以通过 Source Map 映射代码，让你在源代码上断点调试。 Webpack 支持生成 Source Map，只需在启动时带上 --devtool source-map 参数。 加上参数重启 DevServer 后刷新页面，再打开 Chrome 浏览器的开发者工具，就可在 Sources 栏中看到可调试的源代码了。

8.核心

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

 Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

 

9.entity

配置入口,webpack执行构件的第一步,从入口开始搜寻递归解析出所有入口依赖的模块.

context

Webpack 在寻找相对路径的文件时会以 context 为根目录，context 默认为执行启动 Webpack 时所在的当前工作目录 

chunk

Webpack 会为每个生成的 Chunk 取一个名称，Chunk 的名称和 Entry 的配置有关：

• 如果 entry 是一个 string 或 array，就只会生成一个 Chunk，这时 Chunk 的名称是 main；
• 如果 entry 是一个 object，就可能会出现多个 Chunk，这时 Chunk 的名称是 object 键值对里键的名称。

 10.output

是一个object,配置输出最终想要的代码.

filemane: 配置想要输出的文件名.

chunkFilename: 配置无入口的的chunk在输出代码块时的名字

path: 配置输出文件存放在本地的目录

pubilcPath: 配置发布到线上的资源的url前缀

10.module

配置处理模块的规则

test

include

exclude