webpack使用指南

1.设定HtmlWebpackPlugin，自动生成index.html dom操作全在js中(之前报错是dom还没加载完成js就开始执行)

2.source map将编译后的代码映射回原始源代码，方便查看报错位置；本例中我们使用devtool:'inline-source-map'(不要用于生产环境)

3.每次输入 npm run build比较麻烦，选择一个开发工具，本例我们选用webpack-dev-server（开发服务器）实现代码发生变化后自动编译代码

命令行中运行npm start可以看到浏览器在localhost：8080下建立服务，自动加载页面

4.https://www.jianshu.com/p/9d152006d312npm安装webpack-dev-server失败，cnpm也失败的解决方法（失败报错原因是网络太慢npm安装失败）：npm config set registry https://registry.npm.taobao.org

5.模块热替换（HMR）允许在运行时更新各种模块，而无需进行完全刷新（不用于生产环境）

6.tree shaking 移除js上下文中的未引用代码（dead-code）

7.生产环境构建：在生产环境中启用 source map,对调试代码和运行基准测试很有帮助；如果是开发环境则用inline-source-map;

避免在生产中使用inline-***和eval-***,它们会增加bundle大小降低整体性能

8.代码分离方法：

入口起点：使用 entry 配置手动地分离代码。

防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。

动态导入：通过模块的内联函数调用来分离代码。

9.懒加载：注意当调用 ES6 模块的 import() 方法（引入模块）时，必须指向模块的 .default 值，因为它才是 promise 被处理后返回的实际的 module 对象。

10.缓存：

输出文件的文件名：通过使用 output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件。[hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash，但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 chunk 相关(chunk-specific)的哈希

提取模板：CommonsChunkPlugin 可以用于将模块分离到单独的文件中，另一个功能时能够在每次修改后的构建结果中，将 webpack 的样板(boilerplate)和 manifest 提取出来。通过指定 entry 配置中未用到的名称，此插件会自动将我们需要的内容提取到单独的包中。将第三方库提取到单独的vendor chunk文件中；CommonsChunkPlugin 的 'vendor' 实例，必须在 'manifest' 实例之前引入。

main bundle 会随着自身的新增内容的修改，而发生变化。

vendor bundle 会随着自身的 module.id 的修改，而发生变化。

manifest bundle 会因为当前包含一个新模块的引用，而发生变化。

11.通过以下方式暴露 library：

变量：作为一个全局变量，通过 script 标签来访问（libraryTarget:'var'）。

this：通过 this 对象访问（libraryTarget:'this'）。

window：通过 window 对象访问，在浏览器中（libraryTarget:'window'）。

UMD：在 AMD 或 CommonJS 的 require 之后可访问（libraryTarget:'umd'）。

12.shimming:针对不符合规范的模块；polyfill虽然是一种模块引入方式，但是并不推荐在主bundle中引入polyfills，因为这不利于具备这些模块功能的现代浏览器用户，会使他们下载体积很大，但却不需要的脚本文件。

script-loader会在全局上下文中对代码进行取值，类似于通过一个script标签引入脚本，使用此loader将不会有devtool的支持，它不会被webpack压缩。

小结：shim是一个库(library),它将一个新的api引入到一个旧的环境，而且仅靠旧的环境中已有的手段实现。polyfill就是一个用在浏览器api上的shim.我们通常的做法是先检查当前浏览器是否支持某个api,如果不支持的话就加载对应的polyfill。然后新旧浏览器就都可以使用这个api了。

13.渐进式网络应用程序（PWA）：通过使用名为Service Worker的网路技术，在离线（offline）时应用程序能够继续运行功能。eg:停止服务器然后刷新，仍然可以查看应用程序正常运行。

14.TypeScript是JavaScript的超集，为其增加了类型系统，可以编译为普通的JavaScript代码。

基础安装：安装TypeScript编译器（compiler）和loader；

loader:ts-loader,可以启动额外的webpack功能，如将其他web资源导入项目中

source map:启动source map，必须配置TypeScript,已将内联的source map输出到编译过的JavaScript文件

使用第三方库：你可以从TypeScript中找到并安装这些第三方库的类型声明文件。

导入其他资源：要在TypeScript里使用费代码资源，需要告诉TypeScript如何兼容这些导入类型。

15.迁移到新版本

16.使用环境变量 通过设置--env可以使你根据需要，出入尽可能多的环境变量

17.性能构建

保持版本最新

将loader应用于最少数的必要模块中

每个额外的loader/plugin都有启动时间 尽量少使用不同的工具

以下几步可以提供解析速度:

尽量减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 中类目的数量，因为他们会增加文件系统调用的次数。

如果你不使用 symlinks ，可以设置 resolve.symlinks: false (例如 npm link 或者 yarn link).

如果你使用自定义解析 plugins ，并且没有指定 context 信息，可以设置 resolve.cacheWithContext: false 。

使用 DllPlugin 将更改不频繁的代码进行单独编译。这将改善引用程序的编译速度。

减少编译的整体大小，以提高构建性能。尽量保持 chunks 小巧:

使用 更少/更小 的库。

在多页面应用程序中使用 CommonsChunksPlugin。

在多页面应用程序中以 async 模式使用 CommonsChunksPlugin 。

移除不使用的代码。

只编译你当前正在开发部分的代码。

可以将非常消耗资源的 loaders 转存到 worker pool 中。不要使用太多的 workers ，因为 Node.js 的 runtime 和 loader 有一定的启动开销。最小化 workers 和主进程间的模块传输。进程间通讯(IPC)是非常消耗资源的。启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。

Development:增量编译、在内存中编译、Devtool、避免在生产环境中才用到的工具（UglifyJsPlugin,ExtractTextPlugin,[hash]/[chunkhash],AggressiveSplittingPlugin,AggressiveMergingPlugin,ModuleConcatenationPlugin)、最小化入口chunk。

Production:多个编译时（parallel-webapck：它允许编译工作在worker池中进行。cache-loader：缓存可以在多个编译时之间共享）、Source Maps(太消耗资源，一般不需要它)

工具：Babel项目中的preset/plugins数量最小化；

TypeScript：

在单独的进程中使用 fork-ts-checker-webpack-plugin 进行类型检查。

配置 loaders 跳过类型检查。

使用 ts-loader 时，设置 happyPackMode: true / transpileOnly: true。

Sass:node-sass 中有个来自 Node.js 线程池的阻塞线程的 bug。 当使用 thread-loader 时，需要设置 workerParallelJobs: 2。

18.内容安全策略：启用CSP

19.开发-Vagrant:项目配置、启动服务器、配合nginx的高级用法。

20.管理依赖：带表达式的require语句、require.context、上下文模块API。

21.公共路径：构建项目时设置路径值（比如生产环境下，把静态文件统一使用CDN加载）、即时设定路径值。

22.集成(integrations)：通常 webpack 用户使用 npm scripts 来作为任务执行器。