bable配置 按需编译 es6+语法

记录在webpack项目中 使用 bable 按需编译es6+语法

先安装以下依赖

npm i @babel/core @babel/preset-env babel-loader -D

webpack.config.js配置loader

...
module:{
	rules:[
		{
			test: /\.js$/,
			exclude: /(node_modules)/,
			include: [path.resolve(__dirname, 'src')],
			use: {
				loader: 'babel-loader'
			}
		}
	]
}
...

bable配置规则

会根据你设置的browserslist按需编译

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 使用按需编译
        "corejs": 2, 
        "modules": false,
        "debug": false // debug模式 可以在打包时看到哪些文件用了哪些需要编译的方法
      }
    ]
  ]
}

开启debug时会打印如下图信息

如图只在需要编译的文件按需编译了使用的方法 不需要的文件就没有编译