webpack

它是一个打包方案，webpack只知道如何打包js文件，不知道如何打包非.js文件，loader可以告诉webpack如何打包这些文件

vue-loader

file-loader

url-loader

图片

字体

样式

plugin可以在webpack运行到某一个时刻时帮你做一些事情，比如html-webpack-plugin会在打包结束这一个时刻自动生成html文件

html-webpack-plugin

clean-webpack-plugin

hot-module-replacement-plugin

{
    entry: {
         app: './src/app.js',
         search: './src/search.js'
    },
    output: {
         filename: '[name].js',
         path: __dirname + '/dist'
    }
}

打包多个入口文件

output: {
    publicPath: 'http://cdn/...'
}

打包后的html引入的js文件中会加上 publicPath前缀

devtool: "source-map"

devtool: "inline-source-map"

devtool: "cheap-inline-source-map"

devtool: "eval"

devtool: "cheap-module-source-map"

devtool: "cheap-module-eval-source-map"

 可以监听变动并自动打包

它不能起服务器，每次打包后需要手动刷新浏览器

功能

基础配置

当file文件的内容改变时，执行后边的回调函数进行热更新

样式文件  vue  react不需要手写这段HMR代码，是因为css-loader  vue-loader内置了这个功能

npm install babel-loader @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/polyfill --save

打包业务代码

打包内库代码

哪些文件转换？
哪些不转换？

webpack.config.js

package.json

比如引入lodash，仅使用其中一两个方法，仍会把所有的lodash打包进来，造成打包文件过大，加载时间长

手动代码分割

使用webpack配置进行代码分割

代码分割的三种方法

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

生成打包过程的描述文件： 
webpack --profile --json > stats.json

打包分析工具
bundle 分析

使用场景

使用方法

区别

代码使用率

缓存能带来的性能提升是非常有限的，应该重点考虑提升代码的使用率，
有些交互之后才能用到的代码，可以放到单独的异步模块里 提高加载速度及页面利用率

解决什么问题

作用

缺点

1、安装插件

2、配置webpack.prod.js

3、经过1和2，还不能把css拆分出来，原因在于
对css文件进行了tree shaking

4、css压缩

Extracting CSS based on entry

Extracting all CSS in a single file

浏览器缓存
存在什么问题

怎么解决

解决webpack打包时存在的兼容性问题，修改webpack的默认行为，实现webpack自身无法实现的一些效果

eg: 自动引入第三方库
如果使用了一些版本比较老的第三方模块，它里边用到了jquery或者lodash等第三方库，而这些模块并没有使用ES6 moudle的 import引入这些第三方库，
这时候打包会出错，使用providePlugin，可以在模块中自动引入依赖的第三方库

自动引入第三方库

改变this的指向

当自己实现一个库时，打包后的文件给别人使用，用户可能会使用各种引入方式，比如 ES6 module   、CommonJS 、AMD、  <script>。。。
你要如何配置才能支持用户的各种引入方式？

ouput:{
    library:'root',
    libraryTarget:'umd' 
}，

externals:['lodash'] 

npm adduser 用户 密码 邮箱
npm publish 把项目发布到npm的仓库里

它是javascript的一个超集

规范了js语法，提升代码的可维护性

安装

创建tsconfig.js文件，并配置

配置webpack.config.js

chunks的作用

它是一个函数

使用自己写的loader

写一个loader

捕获业务代码异常

实现整个网站的国际化

它是一个类

定义一个插件

使用插件

插件的参数

新版本的webpack node等性能更好，打包更快

合理的使用include和exclude，减少loader的作用范围，减少一些无用的分析可以加快打包速度

尽量少的使用插件，并确保每一个插件的可靠性和性能（尽量使用官方插件，性能有保证）
在开发环境下，不要使用代码压缩插件，节约代码压缩这部分的打包时间

extensions: ['.js','.jsx']

alias:{
    child: path.resolve(__dirname,'../src/child')
}

问题

解决思路

没用的包去除掉，或者不要引入

把大文件拆分成小文件

webpack默认是通过nodejs来运行的，所以它是单进程的打包
可以借助node的多进程提升打包速度

thread-loader , happypack 

parallel-webpack

打包时生成sourcemap，内容越详细，打包越慢，根据情况合理使用

在开发环境使用devServer，它在做打包时不会生成dist目录，它会把编译生成的文件放到内存里，内存的读取比硬盘快

比如在开发环境，不需要进行代码压缩，所以不要使用压缩代码的插件

• babel-loader：把 ES6 转换成 ES5

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• sass-loader: Loads a SASS/SCSS file and compiles it to CSS.

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

• ts-loader

• html-webpack-plugin： 为html文件中引入的外部资源，可以生成创建html入口文件

• DllPlugin

• SplitChunksPlugin

• HotModuleReplacementPlugin

• DefinePlugin

• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

clean-webpack-plugin：删除打包文件

1、专注于处理模块化的项目，能做到开箱即用，一步到位
2、可通过plugin扩展，完整好用又不失灵活
3、使用场景不局限于web开发
4、社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
5、良好的开发体验

bundle：是由webpack打包出来的文件，
chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。

不同的作用

不同的用法

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

1、初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3、确定入口：根据配置中的 entry 找出所有的入口文件；
4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5、完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。

编写Loader时要遵循单一原则，每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。 还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。

相对于Loader而言，Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

1、压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
2、利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
3、删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
4、提取公共代码。

1、多入口情况下，使用CommonsChunkPlugin来提取公共代码（CommonsChunkPlugin被弃用了）
2、通过externals配置来提取常用库
3、利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
4、使用Happypack 实现多线程加速编译（效果不好）
5、使用webpack-uglify-paralle（官网查不到）l来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
6、使用Tree-shaking和Scope Hoisting来剔除多余代码

单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可，这里不再赘述

多页应用的话，可以使用webpack的 AutoWebPlugin(查不到)来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：

1、每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
2、随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置

缩小文件的搜索范围

使用DllPlugin减少基础模块编译次数

使用HappyPack开启多进程Loader转换（happypack 效果不好）

使用ParallelUglifyPlugin(查不到)开启多进程压缩JS文件

使用自动刷新

开启模块热替换HMR

区分环境--减小生产环境代码体积

压缩代码-JS、ES、CSS

使用Tree Shaking剔除JS死代码

使用CDN加速静态资源加载

多页面应用提取页面间公共代码，以利用缓存

分割代码以按需加载

使用Prepack提前求值

使用Scope Hoisting

启动Webpack时带上这两个参数可以生成一个json文件，输出分析工具大多依赖该文件进行分析

1、官方工具Webpack Analyse

2、webpack-bundle-analyzer

1、配置babel-loader时，use: [‘babel-loader?cacheDirectory’] cacheDirectory用于缓存babel的编译结果，加快重新编译的速度。另外注意排除node_modules文件夹，因为文件都使用了ES5的语法，没必要再使用Babel转换。
2、配置externals，排除因为已使用<script>标签引入而不用打包的代码，noParse是排除没使用模块化语句的代码。
3、配置performance参数可以输出文件的性能检查配置。
4、配置profile：true，是否捕捉Webpack构建的性能信息，用于分析是什么原因导致构建性能不佳。
5、配置cache：true，是否启用缓存来提升构建速度。
6、可以使用url-loader把小图片转换成base64嵌入到JS或CSS中，减少加载次数。
7、通过imagemin-webpack-plugin压缩图片（查不到imagemin-webpack-plugin）
8、开发环境下将devtool设置为cheap-module-eval-source-map，因为生成这种source map的速度最快，能加速构建。
    在生产环境下将devtool设置为hidden-source-map

• file-loader

• url-loader

加载额外的 Source Map 文件，以方便断点调试

• style-loader

• css-loader

• postcss-loader

• sass-loader

• less-loader

按照模板生成一个html文件

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。
这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

Since version 4 the CommonsChunkPlugin was removed in favor of
optimization.splitChunks and optimization.runtimeChunk options.

永远不要在生产环境(production)下启用 HMR

DefinePlugin 允许创建一个在编译时可以配置的全局常量。
这可能会对开发模式和发布模式的构建允许不同的行为非常有用

删除打包文件，每次打包前清空dist目录

• mini-css-extract-plugin

• optimize-css-assets-webpack-plugin

uglifyjs-webpack-plugin

import()

很多时候我们不需要一次性加载所有的JS文件，而应该在不同阶段去加载所需要的代码。
webpack内置了强大的分割代码的功能可以实现按需加载。

import() 语法，需要 @babel/plugin-syntax-dynamic-import 的插件支持，
但是因为当前 @babel/preset-env 预设中已经包含了 @babel/plugin-syntax-dynamic-import，因此我们不需要再单独安装和配置。

构建结果

webpack 遇到 import(****) 这样的语法的时候，会这样处理：

3. 在入口文件中新增

配置

目录

配置chunks 参数，指定html引入的js文件

resolve 配置 webpack 如何寻找模块所对应的文件。
webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，
但你可以根据自己的需要修改默认的规则。

配置项

• webpack.base.js 定义公共的配置
• webpack.dev.js：定义开发环境的配置
• webpack.prod.js：定义生产环境的配置

webpack-merge 专为 webpack 设计，提供了一个 merge 函数，用于连接数组，合并对象

使用 webpack 内置插件 DefinePlugin 来定义环境变量

配置

使用

假设前端在3000端口，服务端在4000端口，我们通过 webpack 配置的方式去实现跨域

配置代理

speed-measure-webpack-plugin

speed-measure-webpack-plugin 插件可以测量各个插件和loader所花费的时间

确保转译尽可能少的文件。
顾名思义，exclude 指定要排除的文件，include 指定要包含的文件

在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中

只打算给 babel-loader 配置 cache 的话，
也可以不使用 cache-loader，
给 babel-loader 增加选项 cacheDirectory

把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程

当你的项目不是很复杂时，不需要配置 happypack，
因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢

除了使用 Happypack 外，我们也可以使用 thread-loader ，
把 thread-loader 放置在其它 loader 之前

thread-loader 和 Happypack 我对比了一下，构建时间基本没什么差别。
不过 thread-loader 配置起来为简单

虽然很多 webpack 优化的文章上会提及多进程压缩的优化，
不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel。
不过这里我要说一句，没必要单独安装这些插件，它们并不会让你的 Webpack 构建速度提升

当前 Webpack 默认使用的是 TerserWebpackPlugin，默认就开启了多进程和缓存

HardSourceWebpackPlugin 为模块提供中间缓存，
缓存默认的存放路径是: node_modules/.cache/hard-source

首次构建时间变化不大，第二次开始，构建时间降低效果很明显

如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块，
这样 Webpack 会引入这些模块，但是不进行转化和解析，
从而提升 Webpack 的构建性能 ，例如：jquery 、lodash

如果你使用到了不需要解析的第三方依赖，
那么配置 noParse 很显然是一定会起到优化作用的

resolve 配置 webpack 如何寻找模块所对应的文件

resolve.moudles

resolve.extensions 配置，默认是 ['.js', '.json']

项目较小时，优化效果不明显

webpack 的内置插件，作用是忽略第三方包指定目录

减小包体积

可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)，
在 index.html 中通过 <script> 标签引入

希望在使用时，仍然可以通过 import 的方式去引用(如 import $ from 'jquery')，
并且希望 webpack 不会对其进行打包，此时就可以配置 externals

有些时候，如果所有的JS文件都打成一个JS文件，会导致最终生成的JS文件很大，
这个时候，我们就要考虑拆分 bundles

DllPlugin 和 DLLReferencePlugin 可以实现拆分 bundles，
并且可以大大提升构建速度，
DllPlugin 和 DLLReferencePlugin 都是 webpack 的内置模块

使用 DllPlugin 将不会频繁更新的库进行编译，
当这些依赖的版本没有变化时，就不需要重新编译

配置

效果

抽离公共代码是对于多页应用来说的，
如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。
公共代码只需要下载一次就缓存起来了，避免了重复下载

抽离公共代码对于单页应用和多页应该在配置上没有什么区别，
都是配置在 optimization.splitChunks 中

即使是单页应用，同样可以使用这个配置，
例如，打包出来的 bundle.js 体积过大，
我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。
这样可以有效减小 bundle.js 的体积大小
当然，你还可以继续提取业务代码的公共模块

效果

runtimeChunk

借助 webpack-bundle-analyzer 进一步优化

tree-shaking

scope hosting 作用域提升

babel 配置的优化