title: Error in using 'import' in webpack.config.babel.js
body: <pre><code>(function (exports, require, module, __filename, __dirname) { import path from 'path'
                                                                ^^^^^^
  SyntaxError: Unexpected token import
  </code></pre>
  
  <p>This error occurs when I use <code>webpack-dev-server --hot</code>.</p>
  
  <p>It seems like this occurs because it can't read <code>import</code> or webpack doesn't support <code>import</code>. I tried to use <code>babel-register</code> but it doesn't work. Is there any way to solve this problem? Refer to the code below. </p>
  
  <p><strong>webpack.config.babel.js</strong></p>
  
  <pre><code>import path from 'path'
  import webpack from 'webpack'
  import HtmlPlugin from 'html-webpack-plugin'
  import ExtractTextPlugin from 'extract-text-webpack-plugin'
  
  const vueLoaders = {
    html: 'pug-loader',
    css: ExtractTextPlugin.extract({
      use: 'css-loader',
      fallback: 'vue-style-loader'
    }),
    scss: 'vue-style-loader!css-loader!sass-loader',
    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
  }
  
  export default {
    entry: './client/main.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
  
    plugins: [
      new ExtractTextPlugin('bundle.css'),
      new HtmlPlugin({
        title: 'sex',
        template: 'client/assets/index.pug'
      })
    ],
  
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            use: 'css-loader', fallback: 'style-loader'
          })
        }, {
          test: /\.s[a|c]ss$/,
          use: ExtractTextPlugin.extract({
            use: ['css-loader', 'sass-loader'], fallback: 'style-loader'
          })
        }, {
          test: /\.pug$/,
          loader: 'pug-loader'
        }, {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }, {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: { loaders: vueLoaders }
        }, {
          test: /\.(png|jpe?g|gif|svg|ttf|woff2?|eot)$/,
          loader: 'file-loader',
          options: { name: '[name].[ext]?[hash]' }
        }
      ]
    },
  
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
  
    devServer: {
      host: '0.0.0.0',
      historyApiFallback: true
    },
    performance: {
      hints: false
    },
    devtool: '#eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': { NODE_ENV: '"production"' }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: { warnings: false }
      }),
      new webpack.LoaderOptionsPlugin({ minimize: true })
    ])
  }
  </code></pre>