Reputation: 904
(function (exports, require, module, __filename, __dirname) { import path from 'path'
^^^^^^
SyntaxError: Unexpected token import
This error occurs when I use webpack-dev-server --hot
.
It seems like this occurs because it can't read import
or webpack doesn't support import
. I tried to use babel-register
but it doesn't work. Is there any way to solve this problem? Refer to the code below.
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({
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 })
])
}
Upvotes: 6
Views: 7263
Reputation: 9602
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.
Upvotes: 1
Reputation: 3586
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.
require('babel-register');
module.exports = require('./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({
...
Upvotes: 6
Reputation: 53229
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')
Upvotes: 4