查了好久的资料,但是ES6一直无法转为ES5(打包后js文件带箭头函数),最后发现原因是缺少target,故参考官方文档的target写法,终于转化成功

参考资料:
https://www.robinwieruch.de/webpack-babel-setup-tutorial
https://webpack.docschina.org/configuration/target/

当传递多个目标时,将使用共同的特性子集:
webpack.config.js

1
2
3
4
>module.exports = {
// ...
target: ['web', 'es5'],
>};

Webpack 将生成 web 平台的运行时代码,并且只使用 ES5 相关的特性。
目前并不是所有的 target 都可以进行混合。

webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
target: ['web', 'es5'], // 必须写
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
// 可以不用.babelrc文件,在此处添加options,但推荐.babelrc
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: './src/vdom.html',
}),
],
mode: 'development',
}

.babelrc:

1
2
3
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}