webpack学习笔记1（配置相关）

---

前言

记录下webpack常用的一些知识点

一. browserlitrc浏览器兼容配置

1. browserslist

webpack安装默认会装browserslist，主要就是提供符合当前项目平台兼容性的参考

进入node_modules\browserslist\index.js文件可以看到这一条：

var agents = require('caniuse-lite/dist/unpacker/agents').agents

即调用Can i use查看浏览器默认兼容平台

我们可以在终端输入命令npx browserslist看到类似下面这些（太多了，就黏贴一部分打个样）：

and_chr 101
and_ff 100       
and_qq 10.4      
and_uc 12.12     
android 101      
chrome 101       
chrome 100       
chrome 99        
……

2. 配置平台兼容要求

一般产品是会定平台兼容性的，因此，我们需要做平台的配置

• 方式一，package.json:

# 占比超过1% & 进两个版本 & 没有废弃
"browserslist":[
    ">1%",
    "last 2 version",
    "not dead"
 ]

• 方式二，.browserslistrc文件配置：

1%
last 2 version
not dead

再次终端输入命令npx browserslist，就会发现比和上面不配置的list少很多

二. copy-webpack-plugin安装后报错，无法npm run

配置文件里面加了如下配置：

new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(__dirname, 'public'),
          globOptions: {
            ignore: ['**/index.html']
          }
        }
      ]
    })

尝试了npm run dev 和 npm run build都报错：

查了GitHub之类的，写法没问题，最后还说是fast/glob的问题。。。。
后面灵机一动，想着会不会是版本问题，于是降级：

npm i -D copy-webpack-plugin@9

完美解决