安装babel-loader
,@babel/core
,@babel/preset-env
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置webpack.config.json
,加入babel-loader
webpack.config.json
:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.js$/,
loader: 'babel-loader'
}
]
},
plugins: [
// 请确保引入这个插件!new VueLoaderPlugin()],
resolve:{extensions:['.vue','.js'],
alias:{'vue$': 'vue/dist/vue.esm.js'}
}
}
根目录下创建 .babelrc
文件,添加内容:
{
"presets":[
["@babel/preset-env"]
]
}
src/index.js
文件
const add = (a, b) => {return a + b;}
console.log(add(10, 20))
运行npm run start
箭头函数转换后如下:
eval("var add = function add(a, b) {\n return a + b;\n};\n\nconsole.log(add(10, 20));\n\n//# sourceURL=webpack:///./src/index.js?");