webpack使用extract-text-webpack-plugin后babel无法将es6转译成es5

Question

在我加上 extract-text-webpack-plugin 后 babel 无法将 es6 转译成 es5 ，导致 uglify 时无法识别箭头函数而报错

以下是配置文件：
webpack.config.js ：

/* eslint-disable */
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require("clean-webpack-plugin");

var ROOT_PATH = path.resolve(__dirname);
var CLIENT_PATH = path.resolve(ROOT_PATH, 'client');
var TEMPLATE_PATH = path.resolve(CLIENT_PATH, 'template');

module.exports = {
  devtool: 'source-map',
  entry: {
    index: path.resolve(CLIENT_PATH, 'index.js')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].[hash].js'
  },
  module: {
    loaders: [
      // js
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        include: path.join(__dirname, 'client')
      },
      //img
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url-loader?limit=8192'
      }
    ],
    rules: [
      // CSS
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    // new webpack.optimize.OccurenceOrderPlugin(),
    new HtmlWebpackPlugin({
      title: '首页',
      template: path.resolve(TEMPLATE_PATH,'index.html'),
      filename: 'index.html',
      chunks: ['index'],
      inject: 'body'
    }),
    new CleanPlugin(['dist']),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({optimize: true,compress:{warnings:false,drop_console:true}}),
    new ExtractTextPlugin('css/style.css')
  ]
};

package.json ：

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-check-es2015-constants": "^6.22.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.7",
    "eslint": "^4.6.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.5"
  }

.babelrc ：

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"]
}

index.js :

import './css/index.css';

window.onload = () => {
    document.getElementById('root').innerHTML = '123';
    console.log(12332);
};

我将 extract-text-webpack-plugin 去掉时可以正确转译并打包：

但是加上后就无法正确转译：

求大佬们指点T_T

Answer 1

webpack.config.js里面的modules里面的 loaders和rules不要混用。webpack v3使用rules。

当你把loaders里面的内容改到rules里面后，你发现问题解决了。嘿嘿。

另外推荐我刚写的一个博客从零搭建React全家桶框架教程

    module: {
        rules: [
            // js
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: path.join(__dirname, 'client')
            },
            //img
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['url-loader?limit=8192']
            },
            // CSS
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
                // use:['style-loader','css-loader']
            }
        ]
    }