Below is the content of my webpack.config.js file. Despite adding ['react-hot' ,'babel'], I am unable to resolve the issue.
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'client/');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
});
var config = {
cache: true,
devtool: 'eval', // 'source-map', 'eval'
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
loader: ['react-hot' ,'babel'],
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(jpe?g|png|gif|jpg|svg)$/i,
loaders: [
'file?images/hash=sha512&digest=hex&name=../build/img/[hash].[ext]',
'image-webpack?{optimizationLevel: 9, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=../build/fonts/[name].[ext]'
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./client/assets/css/")]
},
plugins: [
devFlagPlugin,
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: true,
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
module.exports = config;