webpack+babel搭建报错

学习webpack中,在安装babel的loader系列浪费了大半天。主要问题是
babel版本升级到8.x 之后,之前的npm安装方式已取消,建议直接官网安装,网上很多loader名字都是错的,这就是我错误的主要原因,今记录一下。

npm install -D babel-loader @babel/core @babel/preset-env webpack 或者cnpm安装。

除了babel-loader其他相关依赖都是以@和/命名的(以官方为准)。如果不小心安装了其他(比如我),一定要删除干净,才可以运行。

在webpack.config.js之中,需要修改:

1.const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

2.plugins之中

plugins: [
...
new VueLoaderPlugin()
],

3.module节点的rules中添加:

{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}

新增.babelrc

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}

至此结束。

重点是注意版本,其次是见招拆招,报什么错,就安装什么loader修改什么文件吧。

发表评论

电子邮件地址不会被公开。 必填项已用*标注