【webpack4x】实战配置及问题解析

目录

1、Library打包

2、Progressive Web Application(PWA)打包配置

3、TypeScript的打包配置

4、WebpackDevServer实现请求转发

5、WebpackDevServer解决单页面应用路由问题

6、EsLint在webpack中的配置

7、提高webpack打包速度的方法

8、多页面打包配置

 

1、 library打包

场景1：

如今咱们写了一个库

1

2. 外部引入咱们的库可能存在的语法

3. 须要咱们的库能够支持

配置libraryTarget： ’umd‘支持上述的前三种方法，对于最后一种使用办法，能够经过library: 'library'绑定到一个全局变量library上

4. 其余

这里能够绑定到window或者this或者global上等

场景2：

有时候须要在本身的库中引入别人的库，作了一些处理。而后某个用户使用了咱们的库，又使用了咱们的库中使用的库，那么就会重复引入两次一个库。

解决办法：

commonjs:'lodash'表示在commonjs语法中，引入名字必须是lodash
root:'_'表示，使用script标签引入的时候，可使用_使用
一般状况下，若是没有特殊说明，能够直接这么设置：

小结：

externals表示的是，不打包到库里面，只有在用户使用的时候，才引入和打包

场景3： 别人怎么使用

1. 删除掉index.html

2.

3. 到npm网站上注册一个帐号

而后到cmd上 npm adduser
而后npm publish
把包发布到上面就能够了。

 

2、Progressive Web Application(PWA)打包配置

1. PWA是什么技术？

当咱们访问一个网站，第一次访问没有问题，后续挂掉了，能从缓存中读取出来这个网页。

2. 安装插件

3.

4.

5. 在项目中应用

6.打包完之后

 

3、TypeScript的打包配置

场景： ts项目编译成浏览器能够运行的js

1.

2.新建tsconfig.json

3. 配置webpack

4. 打包命令

5. 遇到问题： 使用lodash中的一些函数，ts不报错

以上是新版本ts推荐的方式

 

4、WebpackDevServer实现请求转发

场景1： 在实际项目中，咱们请求数据的地址不会彻底写死

须要配置下转发请求的地址：

当咱们请求/react/api下接口的时候，都帮我代理到http://xxxxxx下

场景2： 实际须要请求header.json数据，可是后端尚未写好，须要先请求下demo.json

解决办法

（要注意的是，这个devServer只在开发的时候有，线上的时候不存在）

场景3： 请求转发，转发到https’

场景4 多个路径，吧路径放在context中管理

场景5 对根目录进行转发

必须得设置inde: ''或者false才会生效

场景6 有些网站对origin进行了限制，防止外部爬虫，解决限制（建议作代理转发的时候，时刻加上这个）

场景7 还能够作大量配置（具体查看文档），例如作请求转发的时候，headers里面进行配置

其余1.

以/api开头的都去掉

其余2.

当识别到请求的是一个html文件的时候，直接跳过本次请求

 

5、WebpackDevServer解决单页面应用路由问题

问题分析：

使用react路由去访问/list的时候，devServer觉得你访问的是一个/list.html页面，结果服务器没有这个页面，致使了错误，

解决办法：

特别须要处理的地址的时候，能够这么配置

跳转到哪儿，还能够这样配置

其余须要注意：
项目上线后，可能会遇到相似的问题，须要后端的小伙伴配置上述相似的跳转规则

 

6、EsLint在webpack中的配置

场景1：传统vsCode+插件eslint对代码格式约束

1.

2.

3. 结合vsCode插件eslint

上述表示，使用Airbnb的eslint规范，同时也忽略无状态class和jsx的提示

场景2：

webpack配置使得eslint生效（一般不会这么处理，由于会影响打包的速度）

上述配置了eslint-loader，而且自动处理一些简单的代码，注意放在最早处理，若是放错能够强制处理

打包出问题的时候，直接在浏览器上弹出一层错误提示

 

7、提高webpack打包速度的方法

1. 跟上技术的迭代（Node,Npm,Yarn）

2. 在尽量少的模块上应用loader

例如：

3. 尽量使用一些社区中较好的插件

优化1： 每次打包的时候，好比第三方模块，第一次打包后后续打包直接使用上一次的代码分析，提升打包速度（也就是说第三方包只打包一次）

上述操做主要：将react等这三个库，打包到vendors.dll.js中，而且暴露一个全局变量名vendors

问题1：

单独对第三方包打包，可是如今全局使用不了vendors

解决：

而后在配置文件中：

往index.html中添加
再次打包打开，引入成功

问题2： 咱们引入第三方模块的时候，要去使用打包后的第三方包

和配置

使得webpack打包的时候，会根据咱们打包出来的第三方包和打包分析出来的vendors.manifest.json这个文件，当打包遇到使用了这个映射文件中的第三方包的时候，就会知道，没有必要吧这个第三方模块打包了，直接去底层全局变量拿出来使用。

问题3： 可能会对第三方模块进行拆分，分红好几个*.dll.js

而后须要不断的配置

解决办法：

优化2：控制包文件大小

对于源代码不适用的包，能够经过tree shaking阉割，或者不引入使用

优化3： thread-loader,parallel-webpack,happypack多进程打包

优化4：合理使用sourceMap，

优化5：结合stats分析打包结果

优化6： 开发环境内存编译

优化7： 开发环境无用插件剔除（例如，开发环境就用development不用production，不要像线上环境去使用一些插件）

须要将来在实战中不断积累经验

其余1：

支持js和jsx（可是在组件中引入的时候要加上jsx，不然报错）

其余2：

上述优化

使得支持（后缀为js或jsx）

其余3：

引入一个文件夹名称的时候，首先默认找到文件夹下的index.js（会影响打包速度）

其余4：

引入一个不存在文件（或者别名），会报错，解决办法

 

8、多页面打包配置

1.入口配置

2.输出模板配置

继续优化，每一个页面须要引入的包，使用chunks属性

继续优化，每次添加一个就须要复制一个相似的代码，使用一个方法根据多少个入口进行生成（包括对优化1中的代码提取结合进来）