Error in using 'import' in webpack.config.babel.js

babel-register only transforms the modules you require with babel where you call require("babel-register");, not the module itself.

You can use an intermediate step to make this work with the Webpack configuration.

webpack.config.js

require('babel-register');module.exports = require('./webpack.config.babel.js');

webpack.config.babel.js

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({  ...

Node does not support ES6 import syntax at the moment. Use CommonJS require syntax in the meanwhile.

const path = require('path')const webpack = require('webpack')const HtmlPlugin = require('html-webpack-plugin')const ExtractTextPlugin = require('extract-text-webpack-plugin')

You have created a webpack.config.js and when tying to execute webpack you are getting above error. Cause your webpack config file need to be babelified before you can use it,

1) Rename your webpack.config.js to webpack.config.babel.js.

2) Now create a new file webpack.config.js with just the following 2 lines

require('babel-register');module.exports = require('./webpack.config.babel.js');

3) create a .babelrc file in parallel to your webpack.config.js file with following content. We need to tell babel explicitly what preset to use.

{  "presets": ["latest",'react', 'es2015','stage-2']}

4) add following node modules to your dependency ( Required for presets used in .babelrc)

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) You are done . Now if you execute webpack --progress --colors --watch it should work.