Develop Reference

Config continues to uglify js even after removing uglify configuration

Using webpack 4 I have deployed to production, and one of the pages an error displays in console:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.10/$injector/unpr?p0=eProvider%20%3C-%20e
And in the angular documents displays
Unknown provider: eProvider <- e
People say this message is down to Uglifying your script, and causes this unhelpful error message. So I removed the Uglify config from webpack.prod.js and the script continues to be uglified, thus the console still providing me with this unhelpful error.
I'll post both my webpack.common.js and webpack.prod.js below so you can have a look, but I'm 90% certain there is no configuration left that would uglify the scripts?
Question
How do I stop the uglifying so I can see where the error orginates from in the console?
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
devtool: "source-map",
entry: {
vendor: './src/js/vendor.js',
app: './src/js/index.js',
style: './src/scss/main.scss'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '[name].bundle.js'
},
resolve: {
alias: {
localScripts: path.resolve(__dirname, 'assets'),
app: path.resolve(__dirname, 'app'),
}
},
module: {
rules: [
{
test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } }
]
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, "./src/scss")
],
// exclude: [
// path.resolve(__dirname, "node_modules")
// ],
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false, sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
// cache: false,
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/), //needed for bug in moment
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
inject: false,
title: 'Patent Place',
template: 'index.htm'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
webpack.prod.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
sourceMap: true,
filename: "main.css"
}),
//new UglifyJsPlugin({
//sourceMap: true,
//test: /\.js($|\?)/i,
//}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
map: {
inline: true
}
}
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});

You have enabled the production mode in Webpack. This enables the UglifyJS plugin automatically:
production
Provides process.env.NODE_ENV with value production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.
To disable minifying, either set the mode to development or override the optimization.minimize and/or optimization.minimizer options.

For anyone wanting to know what I did to disable uglifying, based on jumoel's answer, I added this to my config:
webpack.common.js
module.exports = {
devtool: "source-map",
optimization: {
minimize: false
}

How to change path of bundled files inside the newly generated html file

See use-gulp-to-select-and-move-directories-and-their-files
, I changed my html file from dist folder to root, but I don't know how to change to path of bundled file inside the html file
I used follwing gulp task to move my html file
var filesToMove = [
'dist/index.html',
];
gulp.task('move', function(){
gulp.src(filesToMove, { base: './' })
.pipe(gulp.dest('./'));
});
This is the location where I want to change path of bundled file
<link rel="shortcut icon" href="favicon.ico"><link href="app.e6b85da4b9b36d023c5e.css" rel="stylesheet"></head>
And one more place
<script type="text/javascript" src="polyfills.e6b85da4b9b36d023c5e.js"></script><script type="text/javascript" src="app.e6b85da4b9b36d023c5e.js"></script><script type="text/javascript" src="ts-file.e6b85da4b9b36d023c5e.js"></script></body>
**This is my webpack file.Here i gave my dist file file kocation **
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
const { AotPlugin } = require('#ngtools/webpack')
const commonConfig = require('./webpack.common.js')
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const helpers = require('./helpers')
const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
module.exports = webpackMerge(commonConfig(), {
output: {
path: helpers.root('dist'),
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new AotPlugin({
tsConfigPath: helpers.root('tsconfig-aot.json'),
entryModule: helpers.root('src', 'app', 'app.module#AppModule')
}),
new LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
htmlLoader: {
minimize: false
}
}
}),
new UglifyJsPlugin({
beautify: false,
output: {
comments: false
},
mangle: {
screw_ie8: true
},
compress: {
screw_ie8: true,
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
negate_iife: false
},
}),
// new CompressionPlugin({
// asset: '[path].gz[query]',
// algorithm: 'gzip',
// test: /\.js$|\.css$|\.html$/,
// threshold: 10240,
// minRatio: 0.8
// }),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
})
this is my common webpack file
const webpack = require('webpack')
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const helpers = require('./helpers')
module.exports = () => {
const isProd = process.env.ENV === 'production'
return {
// Array of extensions that will be used to resolve modules
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [
helpers.root('src'),
helpers.root('node_modules')
],
},
// The entry point for the bundle
entry: {
'polyfills': helpers.root('src', 'polyfills.ts'),
'ts-file':[
helpers.root('src','app','common','samplelist.ts'),
helpers.root('src','app','common','shared.module.ts'),
helpers.root('src','app','app.module.ts')
],
'app': [
helpers.root('src', isProd ? 'main-aot.ts' : 'main-jit.ts'),
helpers.root('src', 'assets', 'styles', 'main.scss')
]
},
module: {
rules: [
// Compiles all .ts files
{
test: /\.ts$/,
use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
exclude: /\.spec\.ts$/
},
// Injects all html templates into their components and loads referenced assets
{
test: /\.html$/,
use: 'html-loader',
exclude: helpers.root('src', 'index.html')
},
// Copies all images and fonts into dist/assets
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
use: 'file-loader?name=assets/[name].[ext]'
},
// Puts all styles from assets/styles/main.scss in a separate file
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
exclude: helpers.root('src', 'app')
},
// Injects all angular styles into their components
{
test: /\.scss$/,
use: ['raw-loader', 'sass-loader'],
include: helpers.root('src', 'app')
},
// To string and css loader support for *.css files (from Angular components)
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
include: helpers.root('node_modules')
},
// Loads all "required" json files into their components
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
// File name for the extracted styles
new ExtractTextPlugin(`[name]${isProd ? '.[hash]' : ''}.css`),
// Identifies common modules and puts them into a commons chunk
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'polyfills']
}),
// Provides context to Angular's use of System.import
// See: https://github.com/AngularClass/angular2-webpack-starter/issues/993#issuecomment-283423040
new ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('src')
),
// Generates a HTML5 file that includes all webpack bundles
new HtmlWebpackPlugin({
template: helpers.root('src', 'index.html'),
favicon: helpers.root('src', 'favicon.ico')
}),
// Copies all i18n files into dist/i18n
// new CopyWebpackPlugin([{
// from: helpers.root('src', 'i18n'),
// to: 'i18n'
// }]),
],
performance: {
hints: false
}
}
}

"Can't resolve 'syncfusion-javascript'" Webpack - Aurelia

I'm trying to integrate Syncfusions' Js library with an Aurelia project using the Aurelia Syncfusion Bridge, but i'm getting the following error when trying to load the plugin into my vendor package.
ERROR in dll vendor
Module not found: Error: Can't resolve 'syncfusion-javascript' in 'C:\Users\Liam\Downloads\aurelia-webpack1333503894'
# dll vendor
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'app': 'aurelia-bootstrapper' },
resolve: {
extensions: ['.ts', '.js'],
modules: ['ClientApp', 'node_modules'],
},
output: {
path: path.resolve(bundleOutputDir),
publicPath: 'dist/',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } },
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaPlugin({ aureliaApp: 'boot' }),
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-
webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = ({ prod } = {}) => {
const isDevBuild = !prod;
return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'jquery',
"aurelia-syncfusion-bridge",
"syncfusion-javascript"
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
new ModuleDependenciesPlugin({
"aurelia-syncfusion-bridge": ["./grid/grid", "./grid/column"],
}),
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}]
};

Thanks for your interest towards Syncfusion controls.
We recommend you to configure aurelia-syncfusion-bridge resources in webpack.config.js file. Because aurelia-syncfusion-bridge’s resources are traced by aurelia-webpack-plugin and included in app.bundle.
Suppose If we add this plugin in webpack.vendor.js, we need to bundle manually for every additional aurelia-syncfusion-bridge’s resources for proper bundling. Since, we recommend to configure our bridge in webpack.config.js, which will automatically bundle the bridge source along with application bundle.
We have prepared sample for the same and attached below.
Sample
Please let us know if you need further assistance on this.
Thanks,
Abinaya S

Webpack - devtool: source-map for CSS and eval-source-map for JS?

If I use devtool: 'source-map' it works great with CSS:
But, my JavaScript variable names are no fun:
So, if I use devtool: eval-source-maps. Life is great - debugging JS. But my CSS then points to the big bundle-css instead of the separate files:
How do I have my cake and eat it too?!
I would like to use eval-source-map for JS and source-map for CSS during the same build.
This is my webpack config (using the latest of everything as of this writing):
/* eslint no-console:"off" */
const {resolve} = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {getIfUtils, removeEmpty} = require('webpack-config-utils');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const OfflinePlugin = require('offline-plugin/runtime').install();
module.exports = (env) => {
const {ifProd, ifNotProd} = getIfUtils(env);
const config = {
context: resolve('src'),
entry: './js/index/index.js',
output: {
filename: 'bundle.[name].[hash].js',
path: resolve('dist'),
pathinfo: ifNotProd()
},
// devtool: 'source-map' //This works for CSS but not JS,
devtool: 'eval-source-map' //This works for JS but not css
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/
},
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {importLoaders: 1, minimize: false, sourceMap: true}
}
]
})
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
query: {
name: 'static/media/files/[name].[hash:8].[ext]'
}
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
query: {
name: 'static/media/fonts/[name].[hash:8].[ext]'
}
},
{
test: /\.(gif|jpe?g|png)$/,
loader: 'url-loader?limit=25000',
query: {
limit: 10000,
name: 'static/media/images/[name].[hash:8].[ext]'
}
}
]
},
plugins: removeEmpty([
// ifProd(new InlineManifestWebpackPlugin()),
// ifProd(new webpack.optimize.CommonsChunkPlugin({
// names: ['manifest']
// })),
new HtmlWebpackPlugin({
template: './index.html'
// inject: 'head'
}),
// new OfflinePlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: ifProd('"production"', '"development"')
}
}),
new UglifyJSPlugin({
parallel: {
cache: true
},
sourceMap: true
}
),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
preset: 'default',
map: {inline: false}
}
}),
new ExtractTextPlugin('styles.[name].[hash].css'),
new BundleAnalyzerPlugin(),
new ProgressBarPlugin(),
])
};
if (env.debug) {
console.log(config);
debugger // eslint-disable-line
}
return config;
};

This seems to work:
{
...webpackConfig,
devtool: false,
plugins: [
new webpack.SourceMapDevToolPlugin({
test: /\.s?[ac]ss$/
}),
new webpack.EvalSourceMapDevToolPlugin({
test: /\.(vue|[jt]sx?)$/
}),
]
}
This will give you inline-source-map for css, scss and sass and eval-source-map for vue, js, jsx, ts and tsx

webpack dev server does not show the content

I have the following problem when running the webpack dev server:
when I run npm start, it show the following:
➜ directory git:(staging) ✗ npm start
directory #1.0.0 start directory
BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
http://localhost:8080/
webpack result is served from /undefined/
content is served from
directory
404s will fallback to /index.html
Hash: 75773622412153d5f921
Version: webpack 1.12.11
Time: 43330ms
I guess the problem might because the following line:
webpack result is served from /undefined/
When I open the browser at http://localhost:8080/, it appear as follow:
Cannot GET /
and there is no thing in the console.
Do you have any ideas for this problem ?
UPDATE: WEBPACK CONFIG FILE
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const deps = [
'moment/min/moment.min.js',
'underscore/underscore-min.js',
];
/* Include SASS path here if you want to this in your sass files:
* #import 'bourbon';
*/
const bourbon = require('node-bourbon').includePaths;
const TARGET = process.env.npm_lifecycle_event;
const ROOT_PATH = path.resolve(__dirname);
const SASS_DEPS = [bourbon].toString();
const BUILD_NUMBER = process.env.CI_BUILD_NUMBER;
const common = {
entry: path.resolve(ROOT_PATH, 'app/index.js'),
output: {
filename: BUILD_NUMBER + '-[hash].js',
path: path.resolve(ROOT_PATH, 'build'),
publicPath: `/${BUILD_NUMBER}/`,
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass?includePaths[]=' + SASS_DEPS],
include: path.resolve(ROOT_PATH, 'app'),
},
{
test: /\.css$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'sass?includePaths[]=' + SASS_DEPS,
'postcss'
],
include: path.resolve(ROOT_PATH),
exclude: /(pure\/grids|Grids).*\.css$/,
},
{
test: /(pure\/grids|Grids).*\.css$/,
loaders: [
'style',
'css',
'sass?includePaths[]=' + SASS_DEPS,
],
include: path.resolve(ROOT_PATH),
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff',
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.json$/,
loader: 'json',
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: path.resolve(ROOT_PATH, 'app/index.html'),
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: true,
},
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
__STAGING__: JSON.stringify(JSON.parse(process.env.BUILD_STAGING || 'false')),
__API_HOST__: JSON.stringify(process.env.BUILD_STAGING ? 'my.api' : 'my.api'),
}),
],
resolve: {
alias: {
'styles': path.resolve(ROOT_PATH, 'app/styles'),
},
extensions: ['', '.js', '.jsx', '.json'],
},
postcss: function() {
return [
require('postcss-import'),
require('autoprefixer'),
require('postcss-cssnext'),
]
}
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
output: {
filename: '[hash].js',
path: path.resolve(ROOT_PATH, 'build'),
publicPath: '/',
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'react-hot',
'babel-loader'
],
include: path.resolve(ROOT_PATH, 'app'),
},
],
},
devServer: {
colors: true,
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
});
} else if (TARGET === 'build' || TARGET === 'builds') {
const config = {
resolve: {
alias: {},
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.resolve(ROOT_PATH, 'app'),
},
],
noParse: [],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compressor: {
screw_ie8: true,
warnings: false,
},
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) },
}),
],
};
deps.forEach((dep) => {
const depPath = path.resolve(nodeModulesDir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = merge(common, config);
}

Same problem occurred to me when i started using babel-loader > 6.
It was fixed by adding contentBase in webpack dev server configuration.
In my case it looked like this
new WebPackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
contentBase: __dirname + '/public'
}).listen(3000, 'localhost')

I would be great to see your webpack config file to pin point the exact problem, but from the error message, there could be multiple problem
Make sure you are on the right port
Make sure your webpack config has
path and public path setup
Make sure you have contentBase setup as
well
Without seeing your webpack file and more concrete detail, it is quite hard to pinpoint the issue. But you can always go to https://webpack.github.io/docs/webpack-dev-server.html for information on how to set it up.