安装:
npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader
新版本 babel-loader
默认支持es7
语法!
如果需要给 node_modules
内的文件支持es7
则需要如下 正确示范
内配置
如果只是单纯支持 es7
则不需要配置 include
正确示范:
// webpack.config.js:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
...
module: {
rules: [
{
test: /\.m?js$/,
include: [ // 设置包含的文件后 编译时 babel-loader 只用于编译包含内的文件
path.resolve(__dirname,'./src'),
path.resolve(__dirname,'./node_modules/@vendor/your-module')
],
loader: 'babel-loader', //默认支持 es7
...
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin() //使用 vue-loader 请确保在你的 webpack 配置中添加 Vue Loader 的插件
]
}
错误示范:
// webpack.config.js:
{
...
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/, // 排除的文件 X
include: [ // 包含的文件
path.resolve(__dirname,'./src'),
path.resolve(__dirname,'./node_modules/@vendor/your-module')
],
loader: 'babel-loader', //默认支持 es7
...
}
]
}
}
原因: 在 include
内添加文件表示只有该文件内编译才会使用该 loader
所以使用 include 后根本没必要再写 exclude: /node_modules/,
而 exclude
的处理权限高于 include
, 所以当你使用 include
时还添加 exclude: /node_modules/,
则 include
就不生效了!
当写了 include
时, exclude
只能用来排除 include
内包含的文件:
写法如下:
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],