未編譯ES2015腳本的Webpack

Question

我無法通過Webpack編譯我的ES2015腳本。它將捆綁所有的Javascript和SASS文件，但沒有將ES6轉換爲ES5。這是我的編譯代碼中留下了「胖箭頭」，「讓」語句和其他ES6功能。

請幫我弄清楚我做錯了什麼。

這是我的webpack.config.js文件。它在項目的根源。該項目文件在/app.v2與entry.js處於/app.v2/entry.js

module.exports = { 
 
    entry: "entry.js", 
 
    output: { 
 
     path: "app.v2", 
 
     filename: "bundle.js" 
 
    }, 
 
    resolve: { 
 
     modulesDirectories: [ 
 
      './app.v2/components', 
 
      './app.v2', 
 
      'node_modules', 
 
      './app.v2/bower_components', 
 
      './app.v2/assets/js' 
 
     ], 
 
     extensions: ['', '.js', '.es6'] 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.es6$/, 
 
       include: ['./app.v2/components', './app.v2'], 
 
       exclude: /(node_modules|bower_components)/, 
 
       loader: 'babel-loader?cacheDirectory=cache/babelCache', 
 
       query: { 
 
        presets: ['es2015-without-strict'] 
 
       } 
 
      }, 
 
      { 
 
       test: /\.scss$/, 
 
       loaders: ["style", "css", "sass"] 
 
      }, 
 
      { 
 
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "url-loader?limit=10000&minetype=application/font-woff&name=assets/fonts/[name].[ext]" 
 
      }, 
 
      { 
 
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "file-loader?name=assets/fonts/[name].[ext]" 
 
      } 
 
     ] 
 
    } 
 
};

Answer 1

你babel-loader將只對文件擴展名爲.es6工作。 由於您的入口點文件是entry.js，因此不使用此加載程序。

更改您的文件擴展名.es6或加載試驗webpack.config

{ 
    test:/\.(js|es6)$/,       // <-- this line 
    include: ['./app.v2/components', './app.v2'], 
    exclude: /(node_modules|bower_components)/, 
    loader: 'babel-loader?cacheDirectory=cache/babelCache', 
    query: { 
     presets: ['es2015-without-strict'] 
    } 
} 

Answer 2

我想我已經找到了問題。我刪除了Babel加載器的include屬性，現在文件正在編譯。

如果有人能解釋爲什麼這個問題解決了，我很樂意去了解原因。

module.exports = { 
 
entry: "entry.js", 
 
output: { 
 
    path: "app.v2", 
 
    filename: "bundle.js" 
 
}, 
 
resolve: { 
 
    modulesDirectories: [ 
 
     './app.v2/components', 
 
     './app.v2', 
 
     'node_modules', 
 
     './app.v2/bower_components', 
 
     './app.v2/assets/js' 
 
    ], 
 
    extensions: ['', '.js', '.es6'] 
 
}, 
 
module: { 
 
    loaders: [ 
 
     { 
 
      test: /\.(js|es6)$/, 
 
      // include: ['./app.v2/components', './app.v2'], <-- Remove this. 
 
      exclude: /(node_modules|bower_components)/, 
 
      loader: 'babel', 
 
      query: { 
 
       cacheDirectory: 'cache/babelCache', // <-- Move all query params to here. 
 
       presets: ['es2015-without-strict'] 
 
      } 
 
     }, 
 
     { 
 
      test: /\.scss$/, 
 
      loaders: ["style", "css", "sass"] 
 
     }, 
 
     { 
 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
      loader: "url-loader?limit=10000&minetype=application/font-woff&name=assets/fonts/[name].[ext]" 
 
     }, 
 
     { 
 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
      loader: "file-loader?name=assets/fonts/[name].[ext]" 
 
     } 
 
    ] 
 
} 
 
};