I&#39;m using this angular 4 seed app: https://github.com/2sic/app-tutorial-angular4-hello-dnn

It uses webpack and works fine.

It only seems to serve the dev files and not the dist/ folder.

I want to ng serve the dist folder.

Not sure the command to do this or if I need to install a lite server or something.

**I run this command to create the dist folder (which works fine):**

    g build --prod --aot --output-hashing=none

Now I want to run this build in the browser.

How to serve an Angular 2 dist folder index.html

When I change my files while webpack-dev-server is running, the bundle&#39;s files are not updated.
Here are my webpack.config.js and package.json files, as you can see from my npm script, I&#39;ve solved running `webpack watch` and `webpack-dev-server` in the same command (`npm run watch &amp;  webpack-dev-server --content-base ./ --port 9966`):

webpack.config.js:

    &#39;use strict&#39;;
    
    var ReactStylePlugin = require(&#39;react-style-webpack-plugin&#39;);
    var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
    
    var webpack = require(&#39;webpack&#39;);
    
    module.exports = {
    	devtool: &#39;sourcemap&#39;,
      entry: [&#39;./js/main.js&#39;],
      output: {
        filename: &#39;bundle.js&#39;,
        path: __dirname + &#39;/assets&#39;,
        publicPath: __dirname + &#39;/&#39;
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            loaders: [
              ReactStylePlugin.loader(),
              &#39;jsx-loader?harmony&#39;
            ]
          },
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(&#39;css-loader&#39;)
          }
        ]
      },
      plugins: [
        new ReactStylePlugin(&#39;bundle.css&#39;),
        new webpack.DefinePlugin({
          &#39;process.env&#39;: {
            // To enable production mode:
            //NODE_ENV: JSON.stringify(&#39;production&#39;)
          }
        })
      ]
    }

package.json:

    {
      &quot;name&quot;: &quot;reactTest&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;scripts&quot;: {
        &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
        &quot;watch&quot;: &quot;webpack --watch&quot;,
        &quot;build&quot;: &quot;webpack&quot;,
        &quot;web&quot;: &quot;npm run watch &amp;  webpack-dev-server --content-base ./ --port 9966&quot;
      },
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;devDependencies&quot;: {
        &quot;css-loader&quot;: &quot;^0.10.1&quot;,
        &quot;extract-text-webpack-plugin&quot;: &quot;^0.3.8&quot;,
        &quot;jsx-loader&quot;: &quot;^0.13.1&quot;,
        &quot;react-style-webpack-plugin&quot;: &quot;^0.4.0&quot;,
        &quot;style-loader&quot;: &quot;^0.10.2&quot;,
        &quot;url-loader&quot;: &quot;^0.5.5&quot;,
        &quot;webpack&quot;: &quot;^1.8.5&quot;,
        &quot;webpack-dev-server&quot;: &quot;^1.8.0&quot;
      },
      &quot;dependencies&quot;: {
        &quot;react&quot;: &quot;^0.13.1&quot;,
        &quot;react-style&quot;: &quot;^0.5.3&quot;
      }
    }


my directory structure is:

    assets	
      bundle.css
      bundle.css.map	
      bundle.js	
      bundle.js.map	
    js
      AppActions.js
      Profile.css.js
	  ProfileList.js
	  main.js
      AppConstants.js
	  AppStore.js		
      Profile.js
	  ResultPage.js		
    package.json
    index.html
    node_modules
    webpack.config.js

every file inside `assets` directory is generated by webpack

webpack-dev-server does not watch for my file changes

I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not rebuild again. I know the index is not in the entry, but is there a way to solve this?

How to watch index.html using webpack-dev-server and html-webpack-plugin

I&#39;m trying to use webpack-dev-server to run a simple program
but I&#39;m getting this error:

    module.js:471
        throw err;
        ^
    
    Error: Cannot find module &#39;webpack&#39;
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.&lt;anonymous&gt; 
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)

I have installed webpack with following npm command

    npm install --save-dev webpack

and I have the following configuration:

    (webpack.config.js)
    var webpack = require(&#39;webpack&#39;);
    var path = require(&#39;path&#39;);
    
    var BUILD_DIR = path.resolve(__dirname, &#39;client/public&#39;);
    var APP_DIR = path.resolve(__dirname, &#39;client/app&#39;);
    
    var config = {
      entery: APP_DIR + &#39;/index.js&#39;,
      output: {
        path: BUILD_DIR,
        filename: &#39;bundle,js&#39;,
      },
      module: {
        loaders: [
          {
            test: /.jsx?$/,
            loader: &#39;babel-loader&#39;,
            exclude: /node_modules/,
            query: {
              presets: [&#39;es2015&#39;, &#39;react&#39;]
            }
          }
        ]
      }
    };
    
    module.exports = config;


I have tried everything and I&#39;m really lost.
Does anyone have any idea?

webpack-dev-server Cannot find module &#39;webpack&#39;

I just want to make VS Code&#39;s debugger work with webpack-dev-server without ignoring my breakpoints.

Now, webpack-dev-server serves the bundled files from memory, while, if I understand this correctly, the VS Code debugger searches for them on disk (...or not?...)

As a result, whenever I set a breakpoint I get the dreaded

`Breakpoint ignored because generated code not found (source map problem?)`

Now, every related question I could find had to do with typescript mostly, and not with the fact that webpack-dev-server serves from memory. I am not using typescript. Seems that people are either not using webpack-dev-server, or I am missing something blatantly obvious, with my money on the latter.

This is my VS Code `launch.json`


    {
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      &quot;version&quot;: &quot;0.2.0&quot;,
      &quot;configurations&quot;: [
        {
          &quot;type&quot;: &quot;chrome&quot;,
          &quot;request&quot;: &quot;launch&quot;,
          &quot;name&quot;: &quot;Launch Chrome against localhost&quot;,
          &quot;url&quot;: &quot;http://localhost:8080&quot;,
          &quot;webRoot&quot;: &quot;${workspaceRoot}&quot;,
          &quot;sourceMaps&quot;: true,
          &quot;trace&quot;: true
        }
      ]
    }


and these are the related lines from my `webpack.config.js`


      devtool: &#39;cheap-module-source-map&#39;,
      output: {
        path: path.join(__dirname, &#39;dist&#39;),
        filename: &#39;[name].[chunkhash].js&#39;
      },


I have tried various modifications to the `launch.json` to no avail, so I am just pasting it in vanilla form. 

Note that the `output.path` is only used when there is a production build and the files are spewed to disk. 

Here is what the structure of the files is in the served page: 

[![enter image description here][1]][1]

And here is the command I am running in development

      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js&quot;
      },

Finally, here is a relevant chunk from the trace file

    From target: {&quot;method&quot;:&quot;Debugger.scriptParsed&quot;,&quot;params&quot;:{&quot;scriptId&quot;:&quot;30&quot;,&quot;url&quot;:&quot;http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js&quot;,&quot;startLine&quot;:0,&quot;startColumn&quot;:0,&quot;endLine&quot;:150,&quot;endColumn&quot;:57,&quot;executionContextId&quot;:2,&quot;hash&quot;:&quot;216099518F33D6091EC12795265804FB35669A30&quot;,&quot;executionContextAuxData&quot;:{&quot;isDefault&quot;:true,&quot;frameId&quot;:&quot;18228.1&quot;},&quot;isLiveEdit&quot;:false,&quot;sourceMapURL&quot;:&quot;manifest.0ec68ebd5f0abf9b4cd4.js.map&quot;,&quot;hasSourceURL&quot;:false,&quot;isModule&quot;:false,&quot;length&quot;:5906}}
    Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server&#39;s memory (and that&#39;s OK).
    SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
    SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
    To client: {&quot;seq&quot;:0,&quot;type&quot;:&quot;event&quot;,&quot;event&quot;:&quot;script&quot;,&quot;body&quot;:{&quot;reason&quot;:&quot;new&quot;,&quot;script&quot;:{&quot;id&quot;:1,&quot;source&quot;:{&quot;name&quot;:&quot;manifest.0ec68ebd5f0abf9b4cd4.js&quot;,&quot;path&quot;:&quot;http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js&quot;,&quot;sourceReference&quot;:1001}}}}
    To client: {&quot;seq&quot;:0,&quot;type&quot;:&quot;event&quot;,&quot;event&quot;:&quot;scriptLoaded&quot;,&quot;body&quot;:{&quot;path&quot;:&quot;http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js&quot;}}
    SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
    SourceMap: sourceRoot: 
    SourceMap: sources: [&quot;webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159&quot;]
    SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
    SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
    SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 =&gt; webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - &quot;webpack:///*&quot;: &quot;*&quot;
    SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: [&quot;webpack\\bootstrap 7617f9bf7c8b0bc95159&quot;]


  [1]: https://i.stack.imgur.com/M8CQl.png

How to use VS Code debugger with webpack-dev-server (breakpoints ignored)

I have a Vue project generated by the Vue cli 3 and my hot reloading suddenly stopped working in my browsers. Changes made to the code are still picked up by the terminal, however, my browser is not picking up the changes. I have to manually refresh in order to pick up the new changes. As suggested by some others I manually set `poll: true` in my `vue.config.js` and I also tried to set the proxy, but both had no success.

Any suggestions to make this work again?

Update:

After some Vue updates, it suddenly started working again. I still don&#39;t know the reason for this. It might have been a bug in the vue-cli?

Vue cli 3 hot reload suddenly not working in browsers

&#39;Github&#39; asked me to update &#39;webpack-dev-server&#39; to version 3.1.11 or higher for security reasons.

However, &#39;npm run dev&#39; will not run after the update.

I don&#39;t solve this problem

Error: Cannot find module &#39;webpack-cli/bin/config-yargs&#39;

The code for &#39;package.json&#39; is as follows.

      &quot;dependencies&quot;: {
        &quot;@vue/cli-plugin-babel&quot;: &quot;^3.5.1&quot;,
        &quot;config&quot;: &quot;^3.0.1&quot;,
        &quot;vue&quot;: &quot;^2.5.2&quot;,
        &quot;vue-router&quot;: &quot;^3.0.1&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;vue-jest&quot;: &quot;^1.0.2&quot;,
        &quot;vue-loader&quot;: &quot;^13.3.0&quot;,
        &quot;vue-style-loader&quot;: &quot;^3.0.1&quot;,
        &quot;vue-template-compiler&quot;: &quot;^2.5.2&quot;,
        &quot;webpack&quot;: &quot;^3.12.0&quot;,
        &quot;webpack-bundle-analyzer&quot;: &quot;^3.3.2&quot;,
        &quot;webpack-cli&quot;: &quot;^3.3.10&quot;,
        &quot;webpack-dev-server&quot;: &quot;^3.1.14&quot;,
        &quot;webpack-merge&quot;: &quot;^4.1.0&quot;
      },
      &quot;engines&quot;: {
        &quot;node&quot;: &quot;&gt;= 6.0.0&quot;,
        &quot;npm&quot;: &quot;&gt;= 3.0.0&quot;
      },
      &quot;browserslist&quot;: [
        &quot;&gt; 1%&quot;,
        &quot;last 2 versions&quot;,
        &quot;not ie &lt;= 8&quot;
      ]

Error: Cannot find module &#39;webpack-cli/bin/config-yargs&#39;

I use [babel-loader][1], but can&#39;t figure out how to generate or where find source maps for transpiled files. I tried `eval-source-map`, `inline-source-map`, `source-map`.

**webpack.config.js**

    const BowerWebpackPlugin = require(&quot;bower-webpack-plugin&quot;);
    
    module.exports = {
        entry: &#39;./src/script/index.jsx&#39;,
        output: {
            filename: &#39;bundle.js&#39;,
            sourceMapFilename: &quot;bundle.js.map&quot;,
            publicPath: &#39;http://localhost:8090/assets&#39;
        },
        debug: true,
        devtool: &#39;inline-source-map&#39;,
        module: {
            loaders: [
            	{   
    	            test: /\.js[x]?$/, 
    	            loaders: [&#39;react-hot&#39;, &#39;jsx&#39;, &#39;babel&#39;],
    	            exclude: /node_modules/ 
    	          },
    	          {
    	            test: /\.scss$/,
    	            loaders: [ &#39;style&#39;, &#39;css?sourceMap&#39;, &#39;sass?sourceMap&#39; ]
    	          },
                  {
                    test: /\.less$/,
                    loaders: [ &#39;style&#39;, &#39;css?sourceMap&#39;, &#39;less?sourceMap&#39; ]
                  },
                  {
                    test: /\.css$/,
                    loaders: [ &#39;style&#39;, &#39;css&#39;]
                  },
                  { test: /\.woff$/,   loader: &quot;url-loader?limit=10000&amp;mimetype=application/font-woff&quot; },
                  { test: /\.woff2$/,   loader: &quot;url-loader?limit=10000&amp;mimetype=application/font-woff2&quot; },
                  { test: /\.(eot|ttf|svg|gif|png)$/,    loader: &quot;file-loader&quot; }
            ]
        },
        plugins: [
            new BowerWebpackPlugin()
        ],
        externals: {
            //don&#39;t bundle the &#39;react&#39; npm package with our bundle.js
            //but get it from a global &#39;React&#39; variable
            &#39;react&#39;: &#39;React&#39;
        },
        resolve: {
            extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;]
        }
    }

**package.json**

        {
    	&quot;name&quot;: &quot;Won&quot;,
    	&quot;version&quot;: &quot;0.0.1&quot;,
    	&quot;description&quot;: &quot;Internal evidence application&quot;,
    	&quot;main&quot;: &quot;index.jsx&quot;,
    	&quot;scripts&quot;: {
    		&quot;start&quot;: &quot;npm run serve | npm run dev&quot;,
    		&quot;serve&quot;: &quot;./node_modules/.bin/http-server -p 8080&quot;,
    		&quot;dev&quot;: &quot;webpack-dev-server -d --progress --colors --port 8090&quot;
    	},
    	&quot;author&quot;: &quot;And&quot;,
    	&quot;license&quot;: &quot;ISC&quot;,
    	&quot;devDependencies&quot;: {
    		&quot;babel-core&quot;: &quot;^5.8.23&quot;,
    		&quot;babel-loader&quot;: &quot;^5.3.2&quot;,
    		&quot;bootstrap&quot;: &quot;^3.3.5&quot;,
    		&quot;bootstrap-select&quot;: &quot;^1.7.3&quot;,
    		&quot;bootstrap-table&quot;: &quot;^1.8.1&quot;,
    		&quot;bower-webpack-plugin&quot;: &quot;^0.1.8&quot;,
    		&quot;colresizable&quot;: &quot;^1.5.2&quot;,
    		&quot;css-loader&quot;: &quot;^0.16.0&quot;,
    		&quot;events&quot;: &quot;^1.0.2&quot;,
    		&quot;extract-text-webpack-plugin&quot;: &quot;^0.8.2&quot;,
    		&quot;file-loader&quot;: &quot;^0.8.4&quot;,
    		&quot;flux&quot;: &quot;^2.1.1&quot;,
    		&quot;http-server&quot;: &quot;^0.8.0&quot;,
    		&quot;jquery&quot;: &quot;^2.1.4&quot;,
    		&quot;jquery-ui&quot;: &quot;^1.10.5&quot;,
    		&quot;json-markup&quot;: &quot;^0.1.6&quot;,
    		&quot;jsx-loader&quot;: &quot;^0.13.2&quot;,
    		&quot;less&quot;: &quot;^2.5.1&quot;,
    		&quot;less-loader&quot;: &quot;^2.2.0&quot;,
    		&quot;lodash&quot;: &quot;^3.10.1&quot;,
    		&quot;node-sass&quot;: &quot;^3.2.0&quot;,
    		&quot;object-assign&quot;: &quot;^4.0.1&quot;,
    		&quot;path&quot;: &quot;^0.11.14&quot;,
    		&quot;react&quot;: &quot;^0.13.3&quot;,
    		&quot;react-hot-loader&quot;: &quot;^1.2.9&quot;,
    		&quot;sass-loader&quot;: &quot;^2.0.1&quot;,
    		&quot;style-loader&quot;: &quot;^0.12.3&quot;,
    		&quot;svg-sprite-loader&quot;: &quot;0.0.2&quot;,
    		&quot;url-loader&quot;: &quot;^0.5.6&quot;,
    		&quot;webpack&quot;: &quot;^1.12.0&quot;,
    		&quot;webpack-dev-server&quot;: &quot;^1.10.1&quot;
    	}
    }

edit:// 

After all this [webpack.config.js][2] and this [package.json][3] works for me.

edit2://

Now I use [this webpack config][4] 


  [1]: https://github.com/babel/babel-loader
  [2]: http://pastebin.com/MH7WHGKG
  [3]: http://pastebin.com/HwJCS4R3
  [4]: http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-and-bootstrap/

Webpack-dev-server doesn&#39;t generate source maps

I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server. 

I launch it with:

    webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$IP is a variable that has the host address
$PORT has the port number.

I am instructed to use these vars when deploying an app in Cloud 9, as they have the default IP and PORT info.

The server boots up and compiles the code, no problem, it is *not* showing me the index file though. Only a blank screen with &quot;Invalid Host header&quot; as text.

This is the Request:

    GET / HTTP/1.1
    Host: store-client-nestroia1.c9users.io
    Connection: keep-alive
    Pragma: no-cache
    Cache-Control: no-cache
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
    (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
    Accept: 
    text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    DNT: 1
    Accept-Encoding: gzip, deflate, sdch, br
    Accept-Language: en-US,en;q=0.8

This is my package.json:

    {
      &quot;name&quot;: &quot;workspace&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;scripts&quot;: {
        &quot;dev&quot;: &quot;webpack -d --watch&quot;,
        &quot;server&quot;: &quot;webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT&quot;,
        &quot;build&quot;: &quot;webpack --config webpack.config.js&quot;
      },
      &quot;author&quot;: &quot;Artur Vieira&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;dependencies&quot;: {
        &quot;babel-core&quot;: &quot;^6.18.2&quot;,
        &quot;babel-loader&quot;: &quot;^6.2.8&quot;,
        &quot;babel-preset-es2015&quot;: &quot;^6.18.0&quot;,
        &quot;babel-preset-react&quot;: &quot;^6.16.0&quot;,
        &quot;babel-preset-stage-0&quot;: &quot;^6.24.1&quot;,
        &quot;file-loader&quot;: &quot;^0.11.1&quot;,
        &quot;node-fetch&quot;: &quot;^1.6.3&quot;,
        &quot;react&quot;: &quot;^15.5.4&quot;,
        &quot;react-bootstrap&quot;: &quot;^0.30.9&quot;,
        &quot;react-dom&quot;: &quot;^15.5.4&quot;,
        &quot;react-router&quot;: &quot;^4.1.1&quot;,
        &quot;react-router-dom&quot;: &quot;^4.1.1&quot;,
        &quot;url-loader&quot;: &quot;^0.5.8&quot;,
        &quot;webpack&quot;: &quot;^2.4.1&quot;,
        &quot;webpack-dev-server&quot;: &quot;^2.4.4&quot;,
        &quot;whatwg-fetch&quot;: &quot;^2.0.3&quot;
      }
    }

This is the webpack.config.js:

    const path = require(&#39;path&#39;);
    
    module.exports = {
    
      entry: [&#39;whatwg-fetch&#39;, &quot;./app/_app.jsx&quot;], // string | object | array
      // Here the application starts executing
      // and webpack starts bundling
      output: {
        // options related to how webpack emits results
    
        path: path.resolve(__dirname, &quot;./public&quot;), // string
        // the target directory for all output files
        // must be an absolute path (use the Node.js path module)
    
        filename: &quot;bundle.js&quot;, // string
        // the filename template for entry chunks
        
        publicPath: &quot;/public/&quot;, // string
        // the url to the output directory resolved relative to the HTML page
      },
    
      module: {
        // configuration regarding modules
    
        rules: [
          // rules for modules (configure loaders, parser options, etc.)
          {
            test: /\.jsx?$/,
            include: [
              path.resolve(__dirname, &quot;./app&quot;)
            ],
            exclude: [
              path.resolve(__dirname, &quot;./node_modules&quot;)
            ],
            loader: &quot;babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0&quot;,
            // the loader which should be applied, it&#39;ll be resolved relative to the context
            // -loader suffix is no longer optional in webpack2 for clarity reasons
            // see webpack 1 upgrade guide
          },
          {
            test: /\.css$/,
            use: [ &#39;style-loader&#39;, &#39;css-loader&#39; ]
          },
          {
            test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
            loader: &#39;url-loader&#39;,
            options: {
              limit: 10000
            }
          }
        ]
      },
      
      devServer: {
        compress: true
      }
    }

Webpack dev server is returning this because of my host setup. In webpack-dev-server/lib/Server.js line 60. From https://github.com/webpack/webpack-dev-server

My question is how do I setup to correctly pass this check. Any help would be greatly appreciated.

I am getting an &quot;Invalid Host header&quot; message when connecting to webpack-dev-server remotely

Getting error when running `webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/`. Here is the error log: 

    module.js:442
    throw err;
    ^

    Error: Cannot find module &#39;webpack/bin/config-yargs&#39;
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3) 

Cannot find module &#39;webpack/bin/config-yargs&#39;

I am new to the whole **nodejs**/**reactjs** world so apologies if my question sounds silly. So I am playing around with [reactabular.js][1].

Whenever I do a `npm start` it always runs on `localhost:8080`.

How do I change it to run on `0.0.0.0:8080` to make it publicly accessible? I have been trying to read the source code in the above repo but failed to find the file which does this setting.

Also, to add to that - how do I make it run on port `80` if that is at all possible?


  [1]: https://github.com/reactabular/reactabular

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

As I write webpack.config.js like this 

    module.exports = {
      entry: &#39;./index.jsx&#39;,
      output: {
        filename: &#39;bundle.js&#39;
      },
      module: {
        loaders: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: &#39;babel&#39;,
          query: {
            presets: [&#39;es2015&#39;, &#39;react&#39;]
          }
        }]
      }
    };

And in `index.jsx` I import a `react` module `App`

    import React from &#39;react&#39;;
    import { render } from &#39;react-dom&#39;;
    
    import App from &#39;./containers/App&#39;;
    
    let rootElement = document.getElementById(&#39;box&#39;)
    render(
      &lt;App /&gt;,
      rootElement
    )

I find if I named module app in `App.jsx`, then webpack will say in `index.jsx` can&#39;t find module `App`, but if I named named module app in `App.js`, it will find this module and work well.

So, I&#39;m confuse about it. In my `webpack.config.js`, I have writed `test: /\.jsx?$/` to check file, but why named `*.jsx` can&#39;t be found?

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/cRtyD.png

webpack can&#39;t find module if file named jsx

I&#39;m trying to do something in a project that I&#39;m not sure if it is possible, I am in a wrong way or misunderstanding something. We are using webpack, and the idea is to serve more than one html file.

localhost:8181 -&gt; serves index.html&lt;br&gt;
localhost:8181/example.html -&gt; serves example.html

I&#39;m trying to do it by setting multiple entry points, following the [documentation](https://webpack.github.io/docs/multiple-entry-points.html):

The folder structure is:

    /
    |- package.json
    |- webpack.config.js
      /src
       |- index.html
       |- example.html
       | /js
          |- main.js
          |- example.js

Webpack.config.js:

    ...
    entry: {
        main: &#39;./js/main.js&#39;,
        exampleEntry: &#39;./js/example.js&#39;
    },
    output: {
        path: path.resolve(__dirname, &#39;build&#39;, &#39;target&#39;),
        publicPath: &#39;/&#39;,
        filename: &#39;[name].bundle.js&#39;,
        chunkFilename: &#39;[id].bundle_[chunkhash].js&#39;,
        sourceMapFilename: &#39;[file].map&#39;
    },
    ...

index.html

    &lt;!DOCTYPE html&gt;
    &lt;html
    &lt;head&gt;
        ...
        &lt;link type=&quot;text/css&quot; href=&quot;/style/default.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
        &lt;script src=&quot;/main.bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

example.html:

    &lt;!DOCTYPE html&gt;
    &lt;html
    &lt;head&gt;
        ...
        &lt;link type=&quot;text/css&quot; href=&quot;/style/default.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        ...
        &lt;script src=&quot;/example.bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;


Somebody knows what I&#39;m doing wrong?

Thank you.

Multiple html files using webpack

I&#39;m starting working with `webpack` with a `node/express` environment developing a `ReactJS` server side rendered application with `react-router`. I&#39;m getting very confused about the role of each webpack package for dev and prod (runtime) environments.

Here is the summary of my understanding:

`webpack`: Is a package, a tool to join together different pieces of an web application and bundle then in a single .js file (normally `bundle.js`). The result file is then served in a prod environment to be loaded by the application and contains all necessary components to run the code. Features include shrinking code, minifying, etc.

`webpack-dev-server`: Is a package that offers a **server** to process the website files. It also builds a single .js file (`bundle.js`) from client components but serves it in memory. It also has the option (`-hot`) to monitor all the building files and build a new bundle in memory in case of code changes. The server is served directly in the browser (ex: `http:/localhost:8080/webpack-dev-server/whatever`). The combination of in memory loading, hot processing and browser serving let the user get the application updated on browser when the code changes, ideal for development environment. 

***If I have doubts about the above text, I&#39;m really not sure about the content below, so please advise me if necessary***

A common problem when using `webpack-dev-server` with `node/express` is that `webpack-dev-server` is a server, as is `node/express`. That makes this environment tricky to run both the client and some node/express code (an API etc.). ***NOTE: This is what I&#39;ve faced but would be great to understand why does that happens in more details...***

`webpack-dev-middleware`: This is a middleware with same functions of `webpack-dev-server` (inmemory bundling, hot reloading), but in format that can be injected to the `server/express` application. In that way, you have a sort of server (the `webpack-dev-server`) insider the node server.  ***Oops: Is this a crazy dream ??? How can this piece solve the dev and prod equation and makes life simpler***

`webpack-hot-middleware`: This... ***Stuck here... found this piece when looking for `webpack-dev-middleware`... No idea how to use it.*** 

ENDNOTE: Sorry is there is any wrong thinking. I really need help in order to undestand these variants in a complex environment. If conveninent, please add more packages/data that will build the whole scenario.

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

I would like to know if there&#39;s a configuration option to tell webpack to only log the &quot;important information&quot; to the terminal. Pretty much just errors and warnings, not all of this:

![output of terminal with webpack][1]

There&#39;s just so much output! Would love to suppress the common stuff and only have webpack output the warnings/errors. Would like a solution for `webpack`, `webpack-dev-server`, and `karma-webpack`.

*Note*: I tried `noInfo: true` and `quiet: true` but that didn&#39;t seem to do the trick.

---

*Edit:* I&#39;m thinking this may not be possible, so I&#39;ve created an issue on github: https://github.com/webpack/webpack/issues/1191

  [1]: http://i.stack.imgur.com/abVg5.jpg

Webpack: silence output

I am very new to webpack, I found that in production build we can able to reduce the size of overall code.
Currently webpack builds around 8MB files and main.js around 5MB.
How to reduce the size of code in production build?
I found a sample webpack configurtion file from internet and I configured for my application and I run `npm run build` and its started building and it generated some files in `./dist/` directory.

 1. Still these files are heavy(same as development version)
 2. How to use these files? Currently I am using webpack-dev-server to
    run the application.

package.json file

    {
      &quot;name&quot;: &quot;MyAPP&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;src/server/server.js&quot;,
      &quot;repository&quot;: {
        &quot;type&quot;: &quot;git&quot;,
        &quot;url&quot;: &quot;&quot;
      },
      &quot;keywords&quot;: [
      ],
      &quot;author&quot;: &quot;Iam&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;homepage&quot;: &quot;http://example.com&quot;,
      &quot;scripts&quot;: {
        &quot;test&quot;: &quot;&quot;,
        &quot;start&quot;: &quot;babel-node src/server/bin/server&quot;,
        &quot;build&quot;: &quot;rimraf dist &amp;&amp; NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors&quot;
      },
      &quot;dependencies&quot;: {
        &quot;scripts&quot; : &quot;&quot;, ...
      },
      &quot;devDependencies&quot;: {
        &quot;scripts&quot; : &quot;&quot;, ...
      }
    }


webpack.config.js


    var path = require(&#39;path&#39;);
    var webpack = require(&#39;webpack&#39;);
    var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
    var public_dir = &quot;src/frontend&quot;;
    var ModernizrWebpackPlugin = require(&#39;modernizr-webpack-plugin&#39;);
    
    module.exports = {
      devtool: &#39;eval-source-map&#39;,
      entry: [
        &#39;webpack-hot-middleware/client?reload=true&#39;,
        path.join(__dirname, public_dir , &#39;main.js&#39;)
      ],
      output: {
        path: path.join(__dirname, &#39;/dist/&#39;),
        filename: &#39;[name].js&#39;,
        publicPath: &#39;/&#39;
      },
      plugins: [
        plugins
      ],
      module: {
        loaders: [loaders]
      }
    };


webpack.production.config.js

    var path = require(&#39;path&#39;);
    var webpack = require(&#39;webpack&#39;);
    var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
    var public_dir = &quot;src/frontend&quot;;
    var ModernizrWebpackPlugin = require(&#39;modernizr-webpack-plugin&#39;);
    console.log(path.join(__dirname, &#39;src/frontend&#39; , &#39;index.html&#39;));
    
    module.exports = {
      devtool: &#39;eval-source-map&#39;,
      entry: [
        &#39;webpack-hot-middleware/client?reload=true&#39;,
        path.join(__dirname, &#39;src/frontend&#39; , &#39;main.js&#39;)
      ],
      output: {
        path: path.join(__dirname, &#39;/dist/&#39;),
        filename: &#39;[name].js&#39;,
        publicPath: &#39;/&#39;
      },
      plugins: [plugins],
      resolve: {
        root: [path.resolve(&#39;./src/frontend/utils&#39;), path.resolve(&#39;./src/frontend&#39;)],
        extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.css&#39;]
      },
    
      module: {
        loaders: [loaders]
      }
    };



Webpack how to build production code and how to use it

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/RMyUb.png

I can only see the actual app under `/public`.

The configs in `webpack.config.js` are below:

    var path    = require(&#39;path&#39;);
    var webpack = require(&#39;webpack&#39;);

    module.exports = {

      entry: [
        &#39;webpack-dev-server/client?http://localhost:8080&#39;,
        &#39;webpack/hot/only-dev-server&#39;,
        &#39;./app/js/App.js&#39;
    ],

      output: {
        path: path.join(__dirname, &#39;public&#39;),
        filename: &#39;bundle.js&#39;,
        publicPath: &#39;http://localhost:8080&#39;
      },

      module: {
        loaders: [
          {
            test: /\.js$/,
            loaders: [&#39;react-hot&#39;, &#39;babel-loader&#39;],
            exclude: /node_modules/
          }
         ]
       },

      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ]

    };

The project hierarchy is:

- app

  - js

- node_modules

- public

  - css

  - img

  bundle.js

  index.html

- package.json

- webpack.config.js

How can I modify to make sure the `http://localhost:8080/` entry is for the application per se?

Webpack-dev-server serves a directory list instead of the app page

I&#39;m new to vue js and trying to learn this. I installed a fresh new version of vue webpack in my system. I&#39;m having a css, js and images of this a theme template which I want to include into the HTML so i tried adding it in `index.html` but I can see errors in console and the assets are not being added. While I searched I came to know that I can use `require` in `main.js` file. But I&#39;m getting the error:

Following I&#39;ve tried in my `main.js` file:


&lt;!-- language: lang-js --&gt;

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import Vue from &#39;vue&#39;
     import App from &#39;./App&#39;
     import router from &#39;./router&#39;

     require(&#39;./assets/styles/vendor.css&#39;);
     require(&#39;./assets/styles/main.css&#39;);
     require(&#39;./assets/scripts/vendor/modernizr.js&#39;);

     Vue.config.productionTip = false

     /* eslint-disable no-new */
     new Vue({
      el: &#39;#app&#39;,
       router,
      template: &#39;&lt;App/&gt;&#39;,
      components: { App }
     })

While I tried using import to use it but still I got error

&lt;!-- language: lang-js --&gt;

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import Vue from &#39;vue&#39;
     import App from &#39;./App&#39;
     import router from &#39;./router&#39;
 
     import(&#39;./assets/styles/vendor.css&#39;)
     // require(&#39;./assets/styles/vendor.css&#39;);
     // require(&#39;./assets/styles/main.css&#39;);
     // require(&#39;./assets/scripts/vendor/modernizr.js&#39;);

     Vue.config.productionTip = false

     /* eslint-disable no-new */
     new Vue({
      el: &#39;#app&#39;,
       router,
      template: &#39;&lt;App/&gt;&#39;,
      components: { App }
     })

Here is the error screenshot:
[![Error message][1]][1]

Help me out in this.


  [1]: https://i.stack.imgur.com/VCrnN.png

How to include css files in Vue 2

I&#39;m trying to use webpack-dev-server to compile files and start up a dev web server. 

In my `package.json` I have the script property set to:

    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;webpack-dev-server --hot --inline&quot;,
     }

So the `--hot` and `--inline` should enable the webserver and the hot reloading (as I understand it). 

In my `webpack.config.js` file I set the entry, output, and devServer settings as well as add a loader to look for changes in `.vue` files:

    module.exports = {
        entry: &#39;./src/index.js&#39;,
        output: {
            path: __dirname + &#39;/public&#39;,
            publicPath: &#39;/public&#39;,
            filename: &#39;bundle.js&#39;
        },
        devtool: &#39;source-map&#39;,
        devServer:{
            contentBase: __dirname + &#39;/public&#39;
        },
        module:{
            loaders:[
                { test: /\.vue$/, loader: &#39;vue&#39;}
            ]
        }
    };


So with this setup, I run `npm run dev`. The webpack-dev-server starts up, the module loader test works (i.e. when I save any .vue file it causes webpack to recompile), but:

- The browser never refreshes
- The compiled javascript that gets stored in memory is never made available to the browser

On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally. 

[![Gif of issue][1]][1]

What am I missing?

  [1]: http://i.stack.imgur.com/ByBH5.gif

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

i&#39;m trying to preview a vue web application through webpack-server-dev.I&#39;m following this guide 
https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34




The guide explains that the plugin is used to delete old and unused files in the dist directory. I have already tried replacing ````const CleanWebpackPlugin = require(&#39;clean-webpack-plugin&#39;)```` with ````const { CleanWebpackPlugin } = require(&#39;clean-webpack-plugin&#39;)```` which some posts suggest. i have also tried looking at the documentation on https://github.com/johnagan/clean-webpack-plugin but without succes as i am pretty new to this.

when i try to ````npm run dev```` i get this error
````C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56
    new CleanWebpackPlugin([&#39;dist&#39;]),
    ^

TypeError: CleanWebpackPlugin is not a constructor
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (&lt;anonymous&gt;)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.&lt;anonymous&gt; (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
````
and this is the webpack.config.js file
````
const path = require(&#39;path&#39;)

const { VueLoaderPlugin } = require(&#39;vue-loader&#39;)
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
const CopyWebpackPlugin = require(&#39;copy-webpack-plugin&#39;)
const CleanWebpackPlugin = require(&#39;clean-webpack-plugin&#39;)

module.exports = (env, argv) =&gt; ({
  mode: argv &amp;&amp; argv.mode || &#39;development&#39;,
  devtool: (argv &amp;&amp; argv.mode || &#39;development&#39;) === &#39;production&#39; ? &#39;source-map&#39; : &#39;eval&#39;,

  entry: &#39;./src/app.js&#39;,

  output: {
    path: path.resolve(__dirname, &#39;dist&#39;),
    filename: &#39;[name].js&#39;
  },

  node: false,

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: &#39;vue-loader&#39;
      },
      {
        test: /\.js$/,
        loader: &#39;babel-loader&#39;
      },
      {
        test: /\.css$/,
        use: [
          &#39;vue-style-loader&#39;,
          &#39;css-loader&#39;
        ],
        exclude: /\.module\.css$/
      }
    ]
  },

  resolve: {
    extensions: [
      &#39;.js&#39;,
      &#39;.vue&#39;,
      &#39;.json&#39;
    ],
    alias: {
      &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,
      &#39;@&#39;: path.resolve(__dirname, &#39;src&#39;)
    }
  },

  plugins: [
    new CleanWebpackPlugin([&#39;dist&#39;]),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, &#39;static&#39;, &#39;index.html&#39;),
      inject: true
    }),
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, &#39;static&#39;),
      to: path.resolve(__dirname, &#39;dist&#39;),
      toType: &#39;dir&#39;
    }])
  ],

  optimization: {
    splitChunks: {
      chunks: &#39;all&#39;,
      minSize: 30000,
      maxSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: {
      name: entrypoint =&gt; `runtime~${entrypoint.name}`
    },
    mangleWasmImports: true,
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true
  },

  devServer: {
    compress: true,
    host: &#39;localhost&#39;,
    https: true,
    open: true,
    overlay: true,
    port: 9000
  }
});

````
this is the error i get when using the right import as explained in the documenation :

````C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27
      throw new Error(`clean-webpack-plugin only accepts an options object. See:
      ^

Error: clean-webpack-plugin only accepts an options object. See:
            https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional
    at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (&lt;anonymous&gt;)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.&lt;anonymous&gt; (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19) 
````



if i delete line 56 in webpack.config.js i can run the web application without problems, but i want to understand the source of this issue

TypeError: CleanwebpackPlugin is not a constructor

I&#39;m new to Mocha and I am trying to use it to test a simple React component. The test would pass if the react component doesn&#39;t have any CSS styling but throws a syntax error if the tag within the React component contains any className:

Testing.react.js

    import React from &#39;react&#39;;
    
    export default class Testing extends React.Component {
      render() {
        return (
          &lt;section&gt;
            &lt;form&gt;
              &lt;input type=&quot;text&quot; /&gt;
            &lt;/form&gt;
          &lt;/section&gt;
        );
      }
    }

testing.jsx

    import {
      React,
      sinon,
      assert,
      expect,
      TestUtils
    } from &#39;../../test_helper&#39;;
    
    import TestingSample from &#39;../../../app/components/Testing.react.js&#39;;
    
    describe(&#39;TestingSample component&#39;, function(){
    	before(&#39;render and locate element&#39;, function(){
    		var renderedComponent = TestUtils.renderIntoDocument(
    			&lt;TestingSample /&gt;
    		);
  
    		var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
    			renderedComponent, &#39;input&#39;
    		);
    
    		this.inputElement = inputComponent.getDOMNode();
    	});
    
    	it(&#39;&lt;input&gt; should be of type &quot;text&quot;&#39;, function () {
    		assert(this.inputElement.getAttribute(&#39;type&#39;) === &#39;text&#39;);
    	});
    })
The test would pass: 

    &gt; mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx
    
    
      TestSample component
        ✓ &lt;input&gt; should be of type &quot;text&quot;
    
    
      1 passing (44ms)

after I added the className inside of the input tag an error shows up: 

    import React from &#39;react&#39;;
    import testingStyle from &#39;../../scss/components/landing/testing.scss&#39;;
    
    export default class Testing extends React.Component {
      render() {
        return (
          &lt;section&gt;
            &lt;form&gt;
              &lt;input type=&quot;text&quot; className=&quot;testingStyle.color&quot; placeholder=&quot;Where would you like to dine&quot; /&gt;     
            &lt;/form&gt;
          &lt;/section&gt;
        );
      }
    }
Test result:

    SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
    &gt; 1 | .color {
        | ^
      2 | 	color: red;
      3 | }

I&#39;ve searched online but no luck so far. Am I missing something? Please help me out or point me to the right direction would be greatly appreciated. 
I&#39;m currently using:  
Node Express Server  
React  
React-router  
Webpack  
Babel  
Mocha  
Chai  
Sinon  
Sinon-Chai

Mocha testing failed due to css in webpack

I run webpack-dev-server from the root folder of my project.
I have *assets* folder in */src/assets* that is copied by CopyWebPackPlugin:

    new CopyWebpackPlugin([ { from: &#39;src/assets&#39;, to: &#39;assets&#39; } ])

If I put *logo.png* inside assets folder then After running webpack-dev-server I can&#39;t access *http://localhost/assets/logo.png* file, but can access *http://localhost/src/assets/logo.png* file. However if I run in production mode the situation turns upside down.

How to configure webpack server to make *http://localhost/assets/logo.png* file accessible in development mode?

Serving static assets in webpack dev server

I&#39;m using webpack to run my react frontend successfully using the following config:

    {
        name: &#39;client&#39;,
        entry: &#39;./scripts/main.js&#39;,
        output: {
            path: __dirname,
            filename: &#39;bundle.js&#39;  
        },
        module: {
            loaders: [
                {
                    test: /.jsx?$/,
                    loader: &#39;babel-loader&#39;,
                    exclude: /node_modules/,
                    query:{
                        presets: [&#39;es2015&#39;, &#39;react&#39;, &#39;stage-2&#39;]
                    }
                }
            ]
        }
    }

I&#39;m trying to put up a node.js express backend as well, and would like to run that through webpack as well, so that I have a single server running both the backend and frontend, and because I want to use babel to  transpile my javascript.

I made a quick testserver looking like this:

    var express = require(&#39;express&#39;);
    console.log(&#39;test&#39;);

    var app = express();

    app.get(&#39;/&#39;, function(req, res){
        res.send(&quot;Hello world from Express!!&quot;);
    });

    app.listen(3000, function(){
        console.log(&#39;Example app listening on port 3000&#39;);
    });

If I run this with `node index.js` and open my browser on `localhost:3000` it prints &quot;Hello world from Express!!&quot;. So far so good. Then I tried creating a web-pack config for it:

    var fs = require(&#39;fs&#39;);
    var nodeModules = {};
    fs.readdirSync(&#39;node_modules&#39;)
        .filter(function(x) {
            return [&#39;.bin&#39;].indexOf(x) === -1;
        })
        .forEach(function(mod) {
            nodeModules[mod] = &#39;commonjs &#39; + mod;    
    });

    module.exports = [
    {
        name: &#39;server&#39;,
        target: &#39;node&#39;,
        entry: &#39;./index.js&#39;,
        output: {
            path: __dirname,
            filename: &#39;bundle.js&#39;
        },
        externals: nodeModules,
        module: {
            loaders: [
                { 
                    test: /\.js$/,
                    loaders: [
                        &#39;babel-loader&#39;
                    ]
                },
                {
                    test:  /\.json$/, 
                    loader: &#39;json-loader&#39;
                }
            ]
        }
    }   

When I run the command `webpack-dev-server` it starts up successfully (it seems). However, if I go to my browser on `localhost:3000` now, it just says that the webpage is not available, just as when the server is not running at all.

I&#39;m very new to both node and webpack, so either I have made a small mistake somewhere, or I&#39;m way off ;)

Running a node express server using webpack-dev-server

Currently learning Vue js and express js through some tutorials, I am still newbie regarding these technologies. 

Anyway following the tutorials I am building a small project in which I have a folder &quot;Client&quot; that contains the frontend side of the project and another folder &quot;Server&quot; that contains the backend.

Just before pushing commits to Github, everything was fine, but once I did Github signals some vulnerabilities and after fixing them npm run dev doesn&#39;t work anymore.

tried multiples solutions but nothing worked, reinstalled suspicious modules, reinstalled node modules after running *npm cache clean --force*

This is the error I got  

 

       npm run dev
    
    
    &gt; client@1.0.0 dev D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
    &gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
    D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88
        throw new _ValidationError.default(errors, schema, configuration);
        ^
    
    ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
     - options[0] misses the property &#39;patterns&#39;. Should be:
       [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
        at validate (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88:11)  
        at new CopyPlugin (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\dist\index.js:24:30)
        at Object.&lt;anonymous&gt; (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\build\webpack.dev.conf.js:61:5)
        at Module._compile (internal/modules/cjs/loader.js:1133:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
        at Module.load (internal/modules/cjs/loader.js:977:32)
        at Function.Module._load (internal/modules/cjs/loader.js:877:14)
        at Module.require (internal/modules/cjs/loader.js:1019:19)
        at require (internal/modules/cjs/helpers.js:77:18)
        at WEBPACK_OPTIONS (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
        at requireConfig (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
        at D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
        at Array.forEach (&lt;anonymous&gt;)
        at module.exports (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
        at Object.&lt;anonymous&gt; (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
        at Module._compile (internal/modules/cjs/loader.js:1133:30) {
      errors: [
        {
          keyword: &#39;required&#39;,
          dataPath: &#39;[0]&#39;,
          schemaPath: &#39;#/required&#39;,
          params: [Object],
          message: &quot;should have required property &#39;patterns&#39;&quot;,
          schema: [Object],
          parentSchema: [Object],
          data: [Object],
          children: [Array]
        }
      ],
      schema: {
        definitions: { ObjectPattern: [Object], StringPattern: [Object] },
        type: &#39;object&#39;,
        additionalProperties: false,
        properties: { patterns: [Object], options: [Object] },
        required: [ &#39;patterns&#39; ]
      },
      headerName: &#39;Copy Plugin&#39;,
      baseDataPath: &#39;options&#39;,
      postFormatter: null
    }
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! client@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the client@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_099Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! client@1.0.0 start: `npm run dev`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the client@1.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_148Z-debug.log

This is the log file :

    0 info it worked if it ends with ok
    1 verbose cli [
    1 verbose cli   &#39;C:\\Program Files\\nodejs\\node.exe&#39;,
    1 verbose cli   &#39;C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js&#39;,
    1 verbose cli   &#39;run&#39;,
    1 verbose cli   &#39;build:server&#39;
    1 verbose cli ]
    2 info using npm@6.14.4
    3 info using node@v12.16.3
    4 verbose stack Error: missing script: build:server
    4 verbose stack     at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:5
    4 verbose stack     at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
    4 verbose stack     at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)
    4 verbose stack     at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:12
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:16
    4 verbose stack     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
    5 verbose cwd D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
    6 verbose Windows_NT 10.0.18362
    7 verbose argv &quot;C:\\Program Files\\nodejs\\node.exe&quot; &quot;C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js&quot; &quot;run&quot; &quot;build:server&quot;
    8 verbose node v12.16.3
    9 verbose npm  v6.14.4
    10 error missing script: build:server
    11 verbose exit [ 1, true ]

Running *npm audit* gives the following : 

 

&gt;         Moderate        Cross-Site Scripting                                          
&gt;     
&gt;       Package         serialize-javascript                                          
&gt;     
&gt;       Patched in      &gt;=2.1.1                                                       
&gt;     
&gt;       Dependency of   uglifyjs-webpack-plugin [dev]                                 
&gt;     
&gt;       Path            uglifyjs-webpack-plugin &gt; serialize-javascript                
&gt;     
&gt;       More info       https://npmjs.com/advisories/1426

Related dependencies 

&gt; &quot;webpack&quot;: &quot;^4.43.0&quot;,
&gt;
&gt;     &quot;webpack-bundle-analyzer&quot;: &quot;^3.3.2&quot;,
&gt;
&gt;     &quot;webpack-cli&quot;: &quot;^3.3.11&quot;,
&gt;
&gt;     &quot;webpack-dev-server&quot;: &quot;^3.1.11&quot;,

I hope I provided everything for you guys, if not I will immediately provide anything to help clarify my problem, as I said I&#39;m a newbie to web development. 

**UPDATE:** I&#39;ve trying to figure out the reason behind such error, the problem occurs after updating **webpack-dev-server**
Version that works :

&gt; &quot;webpack-dev-server&quot;: &quot;^2.9.1&quot;

Version with errors : 

&gt; &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;

Is it okay if I ignore vulnerabilities found? Because trying to fix them causes this error.

Thanks

npm run dev fails : ValidationError: Invalid options object

I am using `webpack-dev-server v1.10.1` to boost up my Redux project and I have the options below:

    contentBase: `http://${config.HOST}:${config.PORT}`,
    quiet: false,
    noInfo: true,
    hot: true,
    inline: true,
    lazy: false,
    publicPath: configWebpack.output.publicPath,
    headers: {&quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;},
    stats: {colors: true}


In the JS, I am using `request` from `superagent` to generate a HTTP GET call

    request
		      .get(config.APIHost + apiUrl)
		      .set(&#39;Accept&#39;, &#39;application/json&#39;)
		      .withCredentials()
		      .end(function (err, res) {
					if (!err &amp;&amp; res.body) {
						disptach(() =&gt; {
							return {
								type: actionType || GET_DATA,
								payload: {
									response: res.body
								}
							}
						});
					}
		      });

But I got the CORS error:

    XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:5050&#39; is therefore not allowed access


Any suggestion to resolve this? Thanks a lot

webpack dev server CORS issue

So basically I have a project using Webpack, if I build using `Webpack -w`, editing the file with another editor will trigger the watch; however if I edit the file using Webstorm, nothing will happen. 

I have came across this [post][1], which seems I&#39;m not the only one, however that solution is for Ubuntu, so I was wondering if there is anything similar for Windows?

Thanks


  [1]: https://devnet.jetbrains.com/thread/466233;jsessionid=4E17E9ABA28D55378CDB8A43F53A8511

Webpack watch not working on Webstorm on Windows?

Gulp + live reload serves up my content on localhost and (here&#39;s what I&#39;m after) **launches the browser automatically at the server url** whenever i run the gulp command (i.e I don&#39;t have to click the browser icon and navigate to the url manually). Can this be done in Webpack too?

I&#39;ve tried a plugin called open-browser-webpack-plugin, but I could not get it to work.

All Webpack Dev-Server Solutions on Gang of Coders

Total of 27 Webpack Dev-Server Solutions