Webpack（三）

一.使用Webpack：

1.Webpack命令：

webpack-h 查看webpck所有命令，命令行中所有参数选项

webpack-v 查看webpack版本

webpack [] 完成webpck最简单的使用 打包

2.Webpack配置：

webpack

webpack --config webpack.conf.dev.js

3.第三方脚手架:

Vue-cli

Angular-cli

React-starter

二.Webpck-Cli：

1.主要功能：

交互式的初始化一个项目

迁移项目 V1->V2 webpack-migrate

比webpack在onotialization中多加了几个参数：init、migrate、generate-loader和generate-plugi

2.安装webpack-cli：

npm

3.使用webpack-cli：

webpack-cli init webpack-addons-demo

三.打包js：

1.webpack entry output

2.webpack --config webpack.conf.js

四.编译ES6/7：

1.Babel

2.Babel-presets：

targets

3.Bable-plugin

五.提取公共代码：

1.提取公共代码好处：

（1）减少代码冗余

（2）提高加载速度

2.提取公共代码的插件： CommonsChunkPlugin

	webpack.optimize.CommonsChunkPlugin

3.怎么配置plugins：

        {
		plugins:[
			new webpack.optimize.CommonsChunkPlugin(option) 
                    ]
		}

4.option里面的配置：

options.name or options.names 名称

options.filename 打包以后的文件名

options.minChunks minChunks可以是数字、特殊的值、一个函数

options.chunks 指定了提取代码的范围

options.children 是不是在entry的子模块中查找依赖

options.deepChildren 是不是在entry的所有模块中查找依赖

options.async 创建异步的公共代码块

5.配置的场景：

单页应用

单页应用+第三方依赖

单页应用+第三方依赖+ webpack生成代码

六.代码分割和懒加载：

可以让用户在更短下载时间内看到希望的页面和内容

1.webpack methods

内置方法：
（1）require.ensure

参数： []:dependencies

callback

errorCallback

chunkName

（2）require.include

2.通过ES 2015 Loader Spec定义的动态import：

System.import() ->import()

import() ->Promise

import().then()

import(modulename)

3.代码分割场景

（1）分离业务代码和第三方依赖

（2）分离业务代码和业务公共代码和第三方依赖

（3）分离首次加载和访问后加载的代码

七.处理CSS的style-loader：

1.style-loader

2.style-loader/url

3.style-loader/useable

4.options：

insertAT(插入位置)

insertInto（插入到dom）

singleton（是否使用一个style标签）

transform（转化，浏览器环境下，插入页面前）

八.CSS-Loader:

1.options参数:

alias(解析的别名)

importLoader（@import）

Minimize（是否压缩）

modules（启用css-modules）

2.CSS-Modules:

:local 局部样式

:global 全局样式

compose 继承样式

compose … from path 从某个文件引入样式

九.配置Less/Sass：

1.安装：

	npm install less-loader less  --save-dev

	npm install sass-loader node-sass --save-dev

2.配置

十.Webpack配置：

webpack 配置是标准的 Node.js CommonJS 模块

1.通过 require(…) 导入其他文件

2.通过 require(…) 使用 npm 的工具函数

3.使用 JavaScript 控制流表达式，例如 ?: 操作符

4.对常用值使用常量或变量

5.编写并执行函数来生成部分配置

十一.Webpack模块：

1.模块：

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

2.webpcak模块：

（1）webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

ES2015 import 语句

CommonJS require() 语句

AMD define 和 require 语句

css/sass/less 文件中的 @import 语句
样式(url(…))或 HTML 文件()中的图片链接(image url)

（2）webpack支持的模块类型：

CoffeeScript

TypeScript

ESNext (Babel)

Sass

Less

Stylus

十二.模块解析：

resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用

webpack 中的解析规则：

使用 enhanced-resolve，webpack 能够解析三种文件路径：

1.绝对路径

2.相对路径

3.模块路径

十三.Runtime和Manifest：

1.在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：

（1）你或你的团队编写的源码

（2）你的源码会依赖的任何第三方的 library 或 “vendor” 代码

（3）webpack 的 runtime 和 manifest，管理所有模块的交互

2.Runtime：

untime，以及伴随的 manifest 数据，主要是指：在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。

runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑

3.Manifest：

当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”。

当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 webpack_require 方法，此方法指向模块标识符(module identifier)。

通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块

十四.模块热替换：

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

主要是通过以下几种方式，来显著加快开发速度：

（1）保留在完全重新加载页面时丢失的应用程序状态。

（2）只更新变更内容，以节省宝贵的开发时间。

（3）调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。