webpack配置 node_modules .vue 支援 es7 語法
阿新 • • 發佈:2020-12-26
技術標籤:vuewebpackvuees6/es7webpackbabelloader
安裝:
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")
],