R
R
riksisharakshas2018-12-26 23:06:01
JavaScript
riksisharakshas, 2018-12-26 23:06:01

What's wrong with the webpack setup for HMR?

I don’t know what to do anymore, I run it through 'NODE_ENV=development webpack-dev-server', which is specified in the package.json in the fiddles, when I open the localhost in the console here

sockjs.js:1605 GET localhost:8080/build/info?t=1545853955521 404 (Not Found) [WDS] Disconnected! GET localhost:8080/build/info?t=1545853957317 404 (Not Found)

I apologize in advance if there is some stupidity here, I just started to understand webpack, and I also thank everyone who responded and attach the webpack.config.js file
'use strict'

const NODE_ENV = process.env.NODE_ENV;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
const dev = NODE_ENV == 'development';

module.exports = {

    entry: {
      index: ['webpack-dev-server/client','webpack/hot/dev-server','./app/index'],
    },
    output: {
      path: __dirname + '/build',
      filename: '[name].js'
    },

    mode: NODE_ENV || 'development',

    watch: dev,

    watchOptions: {
      aggregateTimeout: 100
    },
  
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      }),
      new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify(NODE_ENV),
        USER: JSON.stringify(process.env.USER)
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      !dev ? (new CleanWebpackPlugin ["build"]) : ()=>{}

    ],

    resolve: {
      modules: ['node_modules'],
      extensions: ['.js']
    },

    resolveLoader: {
      modules: ['node_modules']
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: ['@babel/plugin-transform-runtime']
            }
          }
        },
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ]
    },

    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: false,
              unsafe: true
            }
          }
        }),
        new OptimizeCSSAssetsPlugin({})

      ],

      noEmitOnErrors: true
    },
    devServer:{
      host: 'localhost',
      port: 8080,
      hot: true
    }
  };

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question