В webpack4 вам необходимо установить режим в конфигурации вашего webpack. Пожалуйста, добавьте
mode: "development"
В конфигурацию вашего веб-пакета.
Вы можете удалить NamedModulesPlugin, поскольку он уже используется в режиме разработки.
Опция source-map предназначена для производственных сборок.
Для вашей сборки dev я бы удалил devtool prop, потому что тогда webpack использует eval по умолчанию.
Если это не сработает, попробуйте:
devtool: 'cheap-module-eval-source-map'
Это то, что я использую. Самый минимальный конфиг.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: { main: './src/index.js' },
output: {
filename: '[name].[hash].js'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
hot: true,
open: true
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' },
{ loader: 'eslint-loader', options: { formatter: stylish } }
]
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};