webpack配置 node_modules .vue 支援 es7 文法

安裝：

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")
],