webpack5.x 使用中出现的问题

使用webpack5.x版本遇到的问题汇总。
本地项目安装的webpack版本如下：

问题1： 编译后的文件中含有箭头函数等es6语法

由于es6语法在IE某些版本下会报错，所以需要转义为es5。webpack给出了多种配置来解决改问题，目前先记录自己发现的几种方式：

1. webpack.config.js文件中配置属性target
target: ['es5'] // esX
2. package.json文件中配置browserslists
   
3. webpack.config.js中的output配置environment
   
   解决方案1和2可以说都是对target属性的配置。两种方法如果一起配置是有优先级的。target不配置时，默认其配置值是browserslists。

问题2： HRM 不生效

在开心的选择了问题1中三种解决方案之一处理了es6语法的问题后，开启热部署时发现…噗通，又掉进坑了…

--hot开启热部署后，更改文件浏览器并没有刷新。根据官网介绍的HRM原理，HRM实际是通过websocket实现的。但是在浏览器中打开本地HRM部署后不生效的文件可以发现浏览器中是没有websocket接口的。

网上找资料，发现了一种解决方案：

1. webpack.config.js文件中配置属性target
target: 'web'
   到此处突然发现当前的配置和【问题一】的解决方案冲突了。所以最终我采用的是【问题一】的第三种解决方案结合target: 'web'最终实现了HRM。

问题3: 装饰器插件安装后解析报错

按照推荐，在使用装饰语法之前先安装了babel-plugin-transform-decortors-legacy插件。之后在打包的时候浏览器控制台出现了报错。检查后是因为本地项目安装的babel是7.x版本的。所以装饰器应该配合使用7.x版本推荐的插件@babel/plugin-proposal-decorators。

1. 安装插件npm i @babel/plugin-proposal-decorators --save-dev
2. 配置.babelrc
{"plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }] ] }

问题4: 待更新…