前端之webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。如图描述：

1.png

核心概念：

入口（entry）：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

输出（output）：指示 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

模块转换器（loader）：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块以供应用程序使用，以及被添加到依赖图中。【在module里面配置】

插件（plugin）：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

模式（mode）：通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。

基本配置

1、拆分配置和merge

2.png

3.png

2、启用本地服务【devServer】

4.png

3、处理Es6

处理Es6 一般在common里面处理， 通过babel-loader处理

5.png

涉及到babel 需要单独配置.babelrc文件

4、处理样式

处理样式 一般也在common里面处理， 通过loader 如 [‘style-loader’, 'css-loader', 'less-loader', 'postcss-loader']

6.png

postcss-loader : 处理兼容性的， 比如处理一些前缀， 需要配置postcss.config.js

7.png

5、处理图片

可以分为dev和pro环境：

8.png

9.png

高级配置

1、多入口

1.png

2.png

3.png

2、抽离css文件（*）

背景: 抽离之前是同通过style-loader 插到,抽离之后打包成单独的css，通过link 引入
插件：mini-css-extract-plugin

4.png

2、抽离公共代码（*）

a、第三方引用单独拆出去 例如 import _ from ‘lodash’
b、公共引用单独拆出去 【多地方引入同一个方法等】

5.png

3、懒加载 - 比较大的文件

import('...')
可以联想一下 Vue、React中的懒加载，用到了才加载。

4、处理JSX和处理Vue 【主要是分别用babel-loader 和 Vue-loader】

module、chunk、bundle区别

module：各个源码文件，webpack一切皆为模块

chunk：多模块合并成的，entry、splitchunk、import()

bundle：最终的输出文件

性能优化 - 打包构建速度

1、优化babel-loader 【因为babel转译es6到es5蛮消耗时间的】

6.png

开启缓存，当Es6代码没有改变的时候，就不会再次编译，include和exclude 设置范围

2、IgnorePlugin 【避免引入无用模块】

7.png

9.png

8.png

3、noParse 【避免重复去打包】

如果代码里面包含一些x.min.js 已经是打包压缩好的，就不用重复去打包了

3.png

4、happyPack 【开启多进程打包js/css

】

5、ParalelUglifyPlugin【开启多进程压缩js】

6、自动刷新【不能用于生产环境】

开启dev-server 会默认开启刷新浏览器

7、热更新【不能用于生产环境】

HotModuleReplacementPlugin

4.png

5.png

8、DllPlugin 【针对一些大的库、三方插件，没必要每次打包都打包一遍，可以提前打包好，引用它】----动态链接库

背景：前端框架如Vue、react体积大、构建慢；比较稳定，不经常升级版本， 同一版本之构建一次就可以， 不用每次去重新构建。【不能用于生产环境】
-- webpack已经内置支持Dllplugin
-- Dll打包出dll文件
--DllReferencePlugin -使用dll文件

6.png

7.png

性能优化 - 优化产出代码

目标： 体积更小；合理分包、不重复加载；速度更快、内存使用更少

1、pro 小图片base64编码 【减少网络请求】

1.png

2、打包出来的bundle加hash

如果代码有修改、则会重新加载文件，若代码没有修改，hash值不会变，就会命中缓存，加载更快

3、懒加载 【如上】

4、提取公共代码【splitChunks 如上】

5、IngorePlugin 【如上】

6、使用CDN加速 --- 修改静态文件url的前缀【如 cdn 域名】

需要配合把静态文件放到自己公司的cdn上面

2.png

7、开启Production模式 --- mode ：production

a、自动开启压缩代码

b、 Vue、React 等自动删掉调试代码 【开发环境的warining】

c、启动Tree-Shaking 【必须用es6 module才能让其生效， common.js就不行（require）】无用代码 删掉

8、 Scope Hosting -- 多个函数合并成一个函数 有点如下：

a、代码体积更小

b、创建函数作用域更少

c、代码可读性更好

3.png

4.png

5.png

为什么要进行打包和构建

带代码层面

1、体积更小(压缩、合并、tree-shaking)，加载更快

2、编译高级语言或语法 （ts、Es6+、less）

3、兼容性和错误检查(postcss、eslint、polyfill)

流程方面

1、统一高效的开发环境

2、统一的构建流程和产出标准

3、集成公司构建规范（提测、上线等）

vite --- 也是一个前端打包工具， Vue作者发起的

优点： 开发环境下无需打包，启动快。

开发环境使用ES6 Module, 无需打包 ---- 非常快
生产环境使用rollup, 并不会快很多