Git Product home page Git Product logo

webpack-dev-server's Introduction

npm node tests coverage discussion downloads contributors

webpack-dev-server

Use webpack with a development server that provides live reloading. This should be used for development only.

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

Table of Contents

Getting Started

First things first, install the module:

npm install webpack-dev-server --save-dev

or

yarn add -D webpack-dev-server

or

pnpm add -D webpack-dev-server

Note: While you can install and run webpack-dev-server globally, we recommend installing it locally. webpack-dev-server will always use a local installation over a global one.

Usage

There are two main, recommended methods of using the module:

With the CLI

The easiest way to use it is with the webpack CLI. In the directory where your webpack.config.js is, run:

npx webpack serve

Following options are available with webpack serve:

Usage: webpack serve|server|s [entries...] [options]

Run the webpack dev server.

Options:
  -c, --config <value...>                             Provide path to a webpack configuration file e.g. ./webpack.config.js.
  --config-name <value...>                            Name of the configuration to use.
  -m, --merge                                         Merge two or more configurations using 'webpack-merge'.
  --disable-interpret                                 Disable interpret for loading the config file.
  --env <value...>                                    Environment passed to the configuration when it is a function.
  --node-env <value>                                  Sets process.env.NODE_ENV to the specified value.
  --define-process-env-node-env <value>               Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`)
  --analyze                                           It invokes webpack-bundle-analyzer plugin to get bundle information.
  --progress [value]                                  Print compilation progress during build.
  -j, --json [value]                                  Prints result as JSON or store it in a file.
  --fail-on-warnings                                  Stop webpack-cli process with non-zero exit code on warnings from webpack
  -d, --devtool <value>                               A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
  --no-devtool                                        Negative 'devtool' option.
  --entry <value...>                                  A module that is loaded upon startup. Only the last one is exported.
  --mode <value>                                      Enable production optimizations or development hints.
  --name <value>                                      Name of the configuration. Used when loading multiple configurations.
  -o, --output-path <value>                           The output directory as **absolute path** (required).
  --stats [value]                                     Stats options object or preset name.
  --no-stats                                          Negative 'stats' option.
  -t, --target <value...>                             Environment to build for. Environment to build for. An array of environments to build for all of them when possible.
  --no-target                                         Negative 'target' option.
  --watch-options-stdin                               Stop watching when stdin stream has ended.
  --no-watch-options-stdin                            Negative 'watch-options-stdin' option.
  --allowed-hosts <value...>                          Allows to enumerate the hosts from which access to the dev server are allowed (useful when you are proxying dev server, by default is 'auto').
  --allowed-hosts-reset                               Clear all items provided in 'allowedHosts' configuration. Allows to enumerate the hosts from which access to the dev server are allowed (useful when you are proxying dev server, by default is 'auto').
  --bonjour                                           Allows to broadcasts dev server via ZeroConf networking on start.
  --no-bonjour                                        Disallows to broadcasts dev server via ZeroConf networking on start.
  --no-client                                         Disables client script.
  --client-logging <value>                            Allows to set log level in the browser.
  --client-overlay                                    Enables a full-screen overlay in the browser when there are compiler errors or warnings.
  --no-client-overlay                                 Disables the full-screen overlay in the browser when there are compiler errors or warnings.
  --client-overlay-errors                             Enables a full-screen overlay in the browser when there are compiler errors.
  --no-client-overlay-errors                          Disables the full-screen overlay in the browser when there are compiler errors.
  --client-overlay-warnings                           Enables a full-screen overlay in the browser when there are compiler warnings.
  --no-client-overlay-warnings                        Disables the full-screen overlay in the browser when there are compiler warnings.
  --client-overlay-runtime-errors                     Enables a full-screen overlay in the browser when there are uncaught runtime errors.
  --no-client-overlay-runtime-errors                  Disables the full-screen overlay in the browser when there are uncaught runtime errors.
  --client-overlay-trusted-types-policy-name <value>  The name of a Trusted Types policy for the overlay. Defaults to 'webpack-dev-server#overlay'.
  --client-progress                                   Prints compilation progress in percentage in the browser.
  --no-client-progress                                Does not print compilation progress in percentage in the browser.
  --client-reconnect [value]                          Tells dev-server the number of times it should try to reconnect the client.
  --no-client-reconnect                               Tells dev-server to not to try to reconnect the client.
  --client-web-socket-transport <value>               Allows to set custom web socket transport to communicate with dev server.
  --client-web-socket-url <value>                     Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
  --client-web-socket-url-hostname <value>            Tells clients connected to devServer to use the provided hostname.
  --client-web-socket-url-pathname <value>            Tells clients connected to devServer to use the provided path to connect.
  --client-web-socket-url-password <value>            Tells clients connected to devServer to use the provided password to authenticate.
  --client-web-socket-url-port <value>                Tells clients connected to devServer to use the provided port.
  --client-web-socket-url-protocol <value>            Tells clients connected to devServer to use the provided protocol.
  --client-web-socket-url-username <value>            Tells clients connected to devServer to use the provided username to authenticate.
  --compress                                          Enables gzip compression for everything served.
  --no-compress                                       Disables gzip compression for everything served.
  --history-api-fallback                              Allows to proxy requests through a specified index page (by default 'index.html'), useful for Single Page Applications that utilise the HTML5 History API.
  --no-history-api-fallback                           Disallows to proxy requests through a specified index page.
  --host <value>                                      Allows to specify a hostname to use.
  --hot [value]                                       Enables Hot Module Replacement.
  --no-hot                                            Disables Hot Module Replacement.
  --ipc [value]                                       Listen to a unix socket.
  --live-reload                                       Enables reload/refresh the page(s) when file changes are detected (enabled by default).
  --no-live-reload                                    Disables reload/refresh the page(s) when file changes are detected (enabled by default).
  --open [value...]                                   Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
  --no-open                                           Does not open the default browser.
  --open-target <value...>                            Opens specified page in browser.
  --open-app-name <value...>                          Open specified browser.
  --open-reset                                        Clear all items provided in 'open' configuration. Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
  --open-target-reset                                 Clear all items provided in 'open.target' configuration. Opens specified page in browser.
  --open-app-name-reset                               Clear all items provided in 'open.app.name' configuration. Open specified browser.
  --port <value>                                      Allows to specify a port to use.
  --server-type <value>                               Allows to set server and options (by default 'http').
  --server-options-passphrase <value>                 Passphrase for a pfx file.
  --server-options-request-cert                       Request for an SSL certificate.
  --no-server-options-request-cert                    Does not request for an SSL certificate.
  --server-options-ca <value...>                      Path to an SSL CA certificate or content of an SSL CA certificate.
  --server-options-ca-reset                           Clear all items provided in 'server.options.ca' configuration. Path to an SSL CA certificate or content of an SSL CA certificate.
  --server-options-cert <value...>                    Path to an SSL certificate or content of an SSL certificate.
  --server-options-cert-reset                         Clear all items provided in 'server.options.cert' configuration. Path to an SSL certificate or content of an SSL certificate.
  --server-options-crl <value...>                     Path to PEM formatted CRLs (Certificate Revocation Lists) or content of PEM formatted CRLs (Certificate Revocation Lists).
  --server-options-crl-reset                          Clear all items provided in 'server.options.crl' configuration. Path to PEM formatted CRLs (Certificate Revocation Lists) or content of PEM formatted CRLs (Certificate Revocation Lists).
  --server-options-key <value...>                     Path to an SSL key or content of an SSL key.
  --server-options-key-reset                          Clear all items provided in 'server.options.key' configuration. Path to an SSL key or content of an SSL key.
  --server-options-pfx <value...>                     Path to an SSL pfx file or content of an SSL pfx file.
  --server-options-pfx-reset                          Clear all items provided in 'server.options.pfx' configuration. Path to an SSL pfx file or content of an SSL pfx file.
  --static [value...]                                 Allows to configure options for serving static files from directory (by default 'public' directory).
  --no-static                                         Disallows to configure options for serving static files from directory.
  --static-directory <value...>                       Directory for static contents.
  --static-public-path <value...>                     The static files will be available in the browser under this public path.
  --static-serve-index                                Tells dev server to use serveIndex middleware when enabled.
  --no-static-serve-index                             Does not tell dev server to use serveIndex middleware.
  --static-watch                                      Watches for files in static content directory.
  --no-static-watch                                   Does not watch for files in static content directory.
  --static-reset                                      Clear all items provided in 'static' configuration. Allows to configure options for serving static files from directory (by default 'public' directory).
  --static-public-path-reset                          Clear all items provided in 'static.publicPath' configuration. The static files will be available in the browser under this public path.
  --watch-files <value...>                            Allows to configure list of globs/directories/files to watch for file changes.
  --watch-files-reset                                 Clear all items provided in 'watchFiles' configuration. Allows to configure list of globs/directories/files to watch for file changes.
  --no-web-socket-server                              Disallows to set web socket server and options.
  --web-socket-server-type <value>                    Allows to set web socket server and options (by default 'ws').

Global options:
  --color                                             Enable colors on console.
  --no-color                                          Disable colors on console.
  -v, --version                                       Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
  -h, --help [verbose]                                Display help for commands and options.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with โ™ฅ by the webpack team.

Note

Detailed documentation for above options is available on this link.

With NPM Scripts

NPM package.json scripts are a convenient and useful means to run locally installed binaries without having to be concerned about their full paths. Simply define a script as such:

{
  "scripts": {
    "serve": "webpack serve"
  }
}

And run the following in your terminal/console:

npm run serve

NPM will automatically refer to the the binary in node_modules for you, and execute the file or command.

With the API

While it's recommended to run webpack-dev-server via the CLI, you may also choose to start a server via the API.

See the related API documentation for webpack-dev-server.

With TypeScript

If you use TypeScript in the webpack config, you'll need to properly type devServer property in order to avoid TS errors (e.g. 'devServer' does not exist in type 'Configuration'). For that use either:

/// <reference path="node_modules/webpack-dev-server/types/lib/Server.d.ts"/>
import type { Configuration } from "webpack";

// Your logic

Or you can import the type from webpack-dev-server, i.e.

import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
import type { Configuration } from "webpack";

const devServer: DevServerConfiguration = {};
const config: Configuration = { devServer };

// module.exports
export default config;

The Result

Either method will start a server instance and begin listening for connections from localhost on port 8080.

webpack-dev-server is configured by default to support live-reload of files as you edit your assets while the server is running.

See the documentation for more use cases and options.

Browser Support

While webpack-dev-server transpiles the client (browser) scripts to an ES5 state, the project only officially supports the last two versions of major browsers. We simply don't have the resources to support every whacky browser out there.

If you find a bug with an obscure / old browser, we would actively welcome a Pull Request to resolve the bug.

Support

We do our best to keep issues in the repository focused on bugs, features, and needed modifications to the code for the module. Because of that, we ask users with general support, "how-to", or "why isn't this working" questions to try one of the other support channels that are available.

Your first-stop-shop for support for webpack-dev-server should be the excellent documentation for the module. If you see an opportunity for improvement of those docs, please head over to the webpack.js.org repo and open a pull request.

From there, we encourage users to visit the webpack discussions and talk to the fine folks there. If your quest for answers comes up dry in chat, head over to StackOverflow and do a quick search or open a new question. Remember; It's always much easier to answer questions that include your webpack.config.js and relevant files!

If you're twitter-savvy you can tweet #webpack with your question and someone should be able to reach out and lend a hand.

If you have discovered a ๐Ÿ›, have a feature suggestion, or would like to see a modification, please feel free to create an issue on Github. Note: The issue template isn't optional, so please be sure not to remove it, and please fill it out completely.

Contributing

We welcome your contributions! Please have a read of CONTRIBUTING.md for more information on how to get involved.

Attribution

This project is heavily inspired by peerigon/nof5.

License

webpack-dev-server's People

Contributors

3846masa avatar alexander-akait avatar anikethsaha avatar anshumanv avatar arnihermann avatar dependabot[bot] avatar eslamhiko avatar evilebottnawi avatar filipesilva avatar hiroppy avatar jamesgeorge007 avatar jhnns avatar knagaitsev avatar lbogdan avatar ludofischer avatar malcolm-kee avatar michael-ciniawsky avatar mrsharpoblunto avatar nougad avatar renovate[bot] avatar rishabh3112 avatar shellscape avatar simenb avatar snitin315 avatar sokra avatar spacek33z avatar stutrek avatar wtgtybhertgeghgtwtg avatar ylemkimon avatar yyx990803 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webpack-dev-server's Issues

Proxy mode no longer works in 1.6.1

Getting error running webpack-dev-server in proxy mode:

Error: Must provide a proper URL as target
at ProxyServer. (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/http-proxy/lib/http-proxy/index.js:71:35)
at Server. (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/lib/Server.js:112:11)
at Layer.handle as handle_request
at next (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:100:13)
at Route.dispatch (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:81:3)
at Layer.

TypeError: Object #<Stream> has no method 'plugin' (gulp)

I'm facing this issue when running a webpack dev server from gulp:

TypeError: Object #<Stream> has no method 'plugin'
at new Server (/Users/***/***/node_modules/webpack-dev-server/lib/Server.js:22:11)

The line that throws the exception:

new WebpackDevServer(webpack(webpackConfig))

If I run webpack-dev-server from the CLI, everything works fine.
I'm on Mac OS X 10.9.3.

Any advice on this?

Headers (e.g. Access-Control-Allow-Origin) on requests to contentBase

Hi,

I've jumped onto webpack and the webpack-dev-server quite recently and have been really enjoying developing with it.

Lately I ran into a scenario in which we have multiple (3-4) sub-projects all running an own webpack-dev-server on different ports. The bundles are then included in on one of the projects (being served over a dev-server) having an aggregating index.html including the other projects' bundles. Whenever another sub-project now starts requesting resources over its contentBase it obviously runs into CORS issues as its not running under the same port.

I've seen the dev-server having a header configuration option. Still, as far as I understand, this header is only for a request to the bundle not the index.html nor any other static resources which are being served via serveMagicHtml() in the lib/Server.js. Is there any way of accomplishing this through configuration or is it a scenario which is just not intended?

Cheers.

Medium level of logging

I'm not sure if this is already supported, but right now the logging levels of webpack-dev-server are either lots and lots or none at all.

What I mean is, on startup and whenever changes are detected, hundreds (thousands maybe?) of lines are output to the console (i'm using the API not the CLI). The problem with this is it pushes useful app code originated logging lines out of the console scroll buffer.

I tried using the noInfo option and what happens is that there is nothing logged from webpack-dev-server at all.

What I would like to see is just the

webpack: bundle is now INVALID.
webpack: bundle is now VALID.

lines and also any errors that occurred and nothing more, so I know that webpack has detected changes and finished processing them.

How to catch errors with webpack-dev-server.js

I'm wondering how to catch errors with webpack-dev-server.js. I simply want to be able to show an alert error message if the browser console is closed. I seem to remember sokra posting some code for that but I can't find it. Basically I want to be able to be able to run a bit of code from my server template if it is in devel mode.

Uncaught SyntaxError: Unexpected token <

when i open the dev-server url i get an error:
Uncaught SyntaxError: Unexpected token < in index.html.js:1

I have checked the encoding on every file.

I hope you can reproduce this by installing the npm package "adesso-webpack"
On Windows, the postinstall-script in this package will scaffold the folder and run npm update via powershell - you will get an error on linux, but this is no problem if you simply to to the nodes_modules/adesso-webpack folder

Add MIME-Type guessing

9 months ago I added a pull-request to webpack-dev-middleware in order to add the correct mime types. I'm kind of surprised that webpack-dev-server is having the same issues. Can't webpack-dev-server just use the dev-middleware to serve all content?

I'd open a pull-request for the dev-server too, but I'm curious why the dev-server isn't using the middleware.

Cannot find module 'http-proxy'

When running the latest webpack-dev-server on npm, I got this:

$ webpack-dev-server

module.js:340
    throw err;
          ^
Error: Cannot find module 'http-proxy'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:7:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Unable to start webpack-dev-server

I'm having difficulty starting webpack-dev-server on Mac OS X Mavericks. I tried versions 1.2.5, 1.2.6, and 1.2.7 with the same results.

โžœ webpack-dev-server        
Hash: 521f38e17b8ca116e31a
Version: webpack 1.1.7
Time: 5ms
Asset  Size  Chunks       Chunk Names
webpack: bundle is now VALID.
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/Richard/projects/

Opening up http://localhost:8080/webpack-dev-server/ in both Firefox and Chrome just displays: "Connecting to socket.io server..."

The network panel shows the socket.io connection as status 101 switching protocols and pending.

Do you know what I'm doing wrong? I set

Optimize for same host use-case

I think a common use-case for an inlined webpack-dev-server is that the contentBase is on the same host but different port. Take a look at my setup for example. It's ugly to hard-code http://vagrant.vm. I think that the webpack-dev-server could also work when the contentBase is a port instead of a full url.

What do you think? I can also create a pull request if you're ok with it.

Additionally using the inlined webpack-dev-server still seems a little bit complicated. Can't the additionally entry points added automagically to the bundle?

do not use i-frame for page content

Many pages from my development-server will have a X-FRAME-OPTIONS: SAMEORIGIN response header, so it is impossible to use the development-server, since the page are displayed in an i-frame.

Would it be possible to not use an i-frame?
Could it be done like livereload, where a script is added to the dom?

Don't trigger module reloading when there were errors generating the bundle.

When using hot module reloading (or plain refreshing) it would be good if the server doesn't trigger module reloading when there were errors during generation of the bundle as it generally results in a broken page. I usually save a lot while coding so it is normal that sometimes the syntax will be wrong.

Or maybe there is already an option for this?

Trying to resolve external loader from node module when not needed

I'm not entirely sure this is an issue or something I didn't entirely understand. There is a small chance it could be a problem with jsx-loader as well.

When I build using the simple "webpack" command the problem doesn't happen, but when I go through webpack-dev-server it does happen. (Both use the same webpack.config.js obviously)

I use the external jsx-loader in my project, mapped to .jsx files. One jsx file depends on a .js file that uses node's util.format. When launching through webpack-dev-server, I get the following error:

ERROR in (webpack)/~/node-libs-browser/~/util/util.js
Module not found: Error: Cannot resolve module jsx in [my_home_path]/local/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/node-libs-browser/node_modules/util
 @ (webpack)/~/node-libs-browser/~/util/util.js 526:19-48

When removing the following line (and the one using format), the error goes away:

var format = require("util").format;

As mentioned earlier, the error doesn't happen and format works fine when I use the regular webpack command.

Here is what my config file looks like:

var path = require("path");
var webpack = require("webpack");

module.exports = {
    context: path.join(__dirname, "app"),
    entry: {
        pageA: "./pageA.jsx",
        pageB: "./pageB.jsx"
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js",
        publicPath: "dist/"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.less$/,loader: "style!css!less" },

            // required for bootstrap icons
            { test: /\.woff$/,   loader: "url?prefix=font/&limit=5000&mimetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file?prefix=font/" },
            { test: /\.eot$/,    loader: "file?prefix=font/" },
            { test: /\.svg$/,    loader: "file?prefix=font/" },

            { test: /\.js$/,    loader: "jsx" },
            { test: /\.jsx$/,   loader: "jsx?insertPragma=React.DOM" },
        ]
    },
    resolve: {
        modulesDirectories: ["node_modules", "bower_components"],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("common.js")
    ]
};

(Yes, I started from the multiple-entry-points example)

My files are:

  • app
    • common.js (the one requiring node's util module)
    • shared.js (the one requiring common.js)
    • pageA.jsx
    • pageB.jsx
  • webpack.config.js
  • package.json
  • pageA.html
  • pageB.html

(If you need me to make a small standalone project to repro, I can.)

By the way, thanks for the wonderful tool! ๐Ÿ˜„

Error with multiple compiler configs

I am using a multiple compiler config setup.
After upgrading from 1.4.9 to 1.6.3 the grunt webpack-dev-server task fails with this stack trace:

TypeError: Cannot call method 'every' of undefined
  at Server._sendStats (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack-dev-server/lib/Server.js:173:18)
  at Server.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack-dev-server/lib/Server.js:25:8)
  at Tapable.applyPlugins (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
  at Tapable.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/MultiCompiler.js:75:10)
  at Tapable.applyPlugins (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
  at Watching._done (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/Compiler.js:78:17)
  at Watching.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/Compiler.js:61:18)
...

I looked in the mentioned file and the stats object does not have an assets key.

Server.prototype._sendStats = function(socket, stats) {
    if(stats.assets.every(function(asset) {
        return !asset.emitted;
    })) return;

This is the contents of stats:

{ version: '1.4.0-beta3',              
  hash: '726f99910ad970dc03dc66219db82afec93fb622',
  errors: [],
  warnings: [],
  children: 
   [ { errors: [],
       warnings: [],
       version: '1.4.0-beta3',
       hash: '726f99910ad970dc03dc',
       time: 1325,
       assetsByChunkName: [Object],
       assets: [Object],
       chunks: [Object],
       modules: [Object],
       children: [Object],
       name: undefined },
     { errors: [],
       warnings: [],
       version: '1.4.0-beta3',
       hash: '66219db82afec93fb622',
       time: 1253,
       assetsByChunkName: [Object],
       assets: [Object],
       chunks: [Object],
       modules: [Object],
       children: [],
       name: undefined } ] }

Hot mode fails when resolve.modulesDirectories is present

Command line: webpack-dev-server --inline --hot --progress --colors

And my webpack.config.js has resolve.modulesDirectories: ['node_modules', './components']

Result:

WARNING in (webpack)-dev-server/~/socket.io/lib/stores/redis.js
Module not found: Error: Cannot resolve module 'msgpack' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib/stores
 @ (webpack)-dev-server/~/socket.io/lib/stores/redis.js 54:20-38

ERROR in (webpack)-dev-server/~/socket.io/lib/manager.js
Module not found: Error: Cannot resolve module 'fs' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/manager.js 11:9-22

ERROR in (webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'fs' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/static.js 14:9-22

ERROR in (webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'child_process' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/static.js 13:9-33

ERROR in (webpack)-dev-server/~/socket.io/~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/redis
 @ (webpack)-dev-server/~/socket.io/~/redis/index.js 3:10-24

ERROR in (webpack)-dev-server/~/socket.io/~/redis/lib/parser/hiredis.js
Module not found: Error: Cannot resolve module 'hiredis' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/redis/lib/parser
 @ (webpack)-dev-server/~/socket.io/~/redis/lib/parser/hiredis.js 5:14-32

ERROR in (webpack)-dev-server/~/socket.io/~/policyfile/lib/server.js
Module not found: Error: Cannot resolve module 'net' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/policyfile/lib
 @ (webpack)-dev-server/~/socket.io/~/policyfile/lib/server.js 6:10-24

Generated index.html isn't served on directory index

I'd like to use html-webpack-plugin to generate my index.html and serve it through webpack-dev-server when developing.

When an index.html file doesn't exist as a "real" file (on disk), loading the app base URL, e.g. http://localhost:3000, serves a directory listing instead of the generated index.html. Explicitly requesting http://localhost:3000/index.html returns the generated index.html as expected.

module build failed, unknown encoding

I'm seeing resolution errors all over the place on projects that were working yesterday. Reverting to earlier versions of webpack-dev-server don't seem to resolve the issue though. This is a bit of a shot in the dark, but do you have any idea what might be causing this?

(removed screenshot)

Output port into console

This is just a small thing: Could output the current port into the console when starting the server? I can't remember all default ports ๐Ÿ˜‰

Reflect pushState updates

Ideally I would like webpack-dev-server to reflect the pushState updates of my app, example :

If I hit http://localhost:8080/webpack-dev-server/jobs/1234 I'll get redirect to the right page of my app.
However if I navigate from http://localhost:8080/webpack-dev-server/ to a job details page, then make a modification on my code, the page will reload but I'll be redirected to the home page.

FYI here is my config, I run a middleware server.js :

var server = require('pushstate-server');

server.start({
  port: process.env.PORT || 8090,
  directory: './local'
});

webpack.config.js :

var webpack = require("webpack");

module.exports = {
  entry: ['./src/js/app/app.coffee'],

  output: {
    path: __dirname + "/local/js/",
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/js/',
    sourceMapFilename: '[file].map'
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.jsx.coffee', '.coffee']
  },

  module: {
    loaders: [
      { test: /\.jsx.coffee$/, loader: 'jsx!coffee' },
      { test: /\.coffee$/, exclude: /\.jsx.coffee$/, loader: 'coffee-loader' },
      { test: /\.json$/, loader: "json" }
    ]
  },

  devServer: {
    stats: {colors: true},
    contentBase: 'http://localhost:8090'
  },

  devtool: "source-map"

};

--content-base parameter ignored

when i use the content-base parameter in my console "--content-base ./xxx" or in my config file "contentBase: "./xxx"

after i start the server it will show me that the content is served from my root directory.

Support HTTPS (SSL)

Would it be possible to support HTTPS?
When i set my content-base to a HTTPS site, i get the following error:

https://mycontentpage was loaded over HTTPS, but ran insecure content from 'http://localhost:8080/bundle.js': this content should also be loaded over HTTPS.

I can not switch my content-page to http and also running chrome with "--disable-web-security" will not help.

Cannot resolve module 'child_process' to build XMLHttpRequest

ERROR in ./~/parse/~/xmlhttprequest/lib/XMLHttpRequest.js Module not found: Error: Cannot resolve module 'child_process' in /Users/aksonov/UPDT/sf/node_modules/parse/node_modules/xmlhttprequest/lib @ ./~/parse/~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

NS_ERROR_FAILURE in Firefox

In some situations there occurs a NS_ERROR_FAILURE in Firefox. I don't know when it occurs and the error message is not very informative:

NS_ERROR_FAILURE: Failure
(847 out of range 551)

However, navigating to localhost:8080/content.html is fine so maybe its caused by the iframe.

I don't expect you to fix this, since there is not much information about this. Just wanted to record it... maybe it's a Firefox bug.

Are there any restrictions/problems if the test code is run in an iframe?

No way to enable hot mode without using deprecated hot: true in config

If I run with --hot and/or with the HotModuleReplacementPlugin, options.hot in Server.js remains undefined.

I tried tracking this in webpack-dev-server.js:

When using --hot and HotModuleReplacementPlugin:

optimist.argv.hot == true && wpOpt.hot == undefined && options.hot == undefined

When using hot:true in config:

optimist.argv.hot == true && wpOpt.hot == true && options.hot == true

Bad code gen in hot mode

I'm trying very hard to get hot mode working in various projects, and failing consistently in various random ways.

One major issue is bad code gen. I'm using webpack/example-app as a publicly available sample in this issue. example-app may be outdated, and use deprecated APIs, but that shouldn't cause bad Javascript generation.

I commented out the window.webpackJsonp usage in app.js and set optimize.maxChunks=1 to make things move ahead, and then saw this being generated for pages.js:

/* 1 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = {
        getPage: function(name, callback) {
            switch(name) {
            case "home":
                !/* require */(/* limit */function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = []; (function() {
                    callback(__webpack_require__(8));
                }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}());
                break;
            case "test1":
                !/* require */(/* limit */function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(13)]; (function(item) {
                    callback(item);
                }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}());
                break;
            case "test2":
                !/*require.ensure*/(function() {
                    callback(__webpack_require__(9));
                }0(__webpack_require__));
                break;
            case "test3":
                !/*require.ensure*/(function() {
                    callback(__webpack_require__(10));
                }0(__webpack_require__));
                break;
            default: callback(null);
            }
        }
    };

/***/ },

Note the 0(__webpack_require__) in there.

I'm running webpack-dev-server like this: webpack-dev-server --colors --content-page index.html --hot

P.S., this issue isn't a major concern for me, I'm reporting it to be thorough. I'm trying to produce a reduced test case for another issue where module.hot.accept()'s first string argument is getting replaced by an incorrect moduleId, and array arguments staying as strings but not working. I'll file that bug separately.

P.P.S., even after fixing pages.js, things still remain broken in hot mode, and we aren't even talking about the hot part. The initial loaded app doesn't fully function.

Regression: URL handling is partially broken since the static middleware patch

Running webpack-dev-server --colors --content-page index.html on example-app and then visiting http://localhost:8080/webpack-dev-server/ (the URL it prints) gives this stack trace:

Error: Invalid path false
    at pathToArray (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:48:40)
    at MemoryInputFileSystem.readdirSync (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:109:13)
    at writeDirectory (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:62:21)
    at Server.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:94:3)
    at next_layer (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:103:13)
    at Route.dispatch (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:107:5)
    at /usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:213:24
    at Function.proto.process_params (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:284:12)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:207:19)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)

I tracked this down to this.middleware.getFilenameFromUrl("/"); returning false in the patch.

Commenting out publicPath in the config changes the trace to this:

Error: File doesn't exists /
    at MemoryInputFileSystem.readdirSync (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:120:10)
    at writeDirectory (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:62:21)
    at Server.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:94:3)
    at next_layer (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:103:13)
    at Route.dispatch (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:107:5)
    at /usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:213:24
    at Function.proto.process_params (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:284:12)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:207:19)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)

Visiting http://localhost:8080/webpack-dev-server/index.html with publicPath commented lets the page load with a 404 error for http://localhost:8080/assets/main.js

Finally, uncommenting publicPath and visiting http://localhost:8080/webpack-dev-server/index.html works.

issues with 'lazy:true'

(webpack-dev-server 1.6.1)

Using the example in the docs - http://webpack.github.io/docs/webpack-dev-server.html#api - displayed Connecting to socket.io server... and didn't serve or build assets. I tried hitting the expected paths for all the assets (because it's meant to rebuild only on request for entry file), but no joy.

Removing lazy:true from the config fixed the problem.

Doesn't build on sub-path (win64) ?

I try to run webpack-dev-server with the following config:

module.exports = {
  entry: ['./lib/boot/index.js'],
  output: {
    path: __dirname + '/build',
    filename: "build.js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

when I start the server it shows this:

Version: webpack 1.4.5
Time: 38ms
   Asset  Size  Chunks             Chunk Names
build.js  1634       0  [emitted]  main
chunk    {0} build.js (main) 49 [rendered]
    [0] multi main 28 {0} [built]
    [1] ./lib/boot/index.js 21 {0} [built]
webpack: bundle is now VALID.

But it doesn't generate any build.js file in build folder!

It works when I run "webpack" on console.

Expose a way to pass additional middleware

I'm developing the app locally but I need /api/* calls to be proxied to a remote server (this was proposed in #19 but got closed although I can't see how 12a9a solved this problem).

When using Connect, middleware did this for me:

var apiHook = function () {
  return function (req, res, next) {
    if (req.url.indexOf('/api') === 0) {
      req.pipe(request(config.baseUrl + req.url)).pipe(res);
    } else {
      next();
    }
  };
};

Similarly, since my app uses pushstate for navigation, I need to serve the root page whenever a path without an extension is requested. I used another middleware for this:

var pushStateHook = function (rootUrl) {
  var path = require('path');
  return function (req, res, next) {
    var ext = path.extname(req.url);
    if ((ext === '' || ext === '.html') && req.url !== '/') {
      req.pipe(request(rootUrl)).pipe(res);
    } else {
      next();
    }
  };
};

I used them like this:

gulp.task('connect', connect.server({
    port: 9000,
    middleware: function (connect) {
      return [
        apiHook(),
        pushStateHook('http://localhost:9000')
      ];
    }
}));

It would be very handy if I could configure additional middleware.
Otherwise I can't see how I can integrate this into my workflow.

dev-server not bundling

There's a good chance this is user error, but I cannot get webpack-dev-server to update my bundles correctly.

I've installed both webpack and webpack-dev-server globally using npm. I can bundle perfectly fine with the webpack command, but the webpack-dev-server is not working correctly. The terminal output indicates that the bundle was successful but nothing is written to the file system. The live reload and app status work as intended, but upon reload it serves the contents of the file system which are out of date.

Here's a simple example in which I'm having trouble:

index.html

<html>
    <body>
        <script src="/bin/init.js"></script>
    </body>
</html>

webpack.config.js

module.exports = {
    entry: "./src/init.js",
    output: {
        path: "bin/",
        filename: "init.js",
    },
    devtool: "sourcemap",
    debug: true
};

src/init.js

console.clear();
console.log('initialized.');

webpack-dev-server output. This does not write anything to the file system.

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\Owner\Workspace\webpack-test
Hash: 801e0272a219e10a6229
Version: webpack 1.2.0-beta6
Time: 108ms
      Asset  Size  Chunks             Chunk Names
    init.js  1611       0  [emitted]  main
init.js.map  1353       0  [emitted]  main
chunk    {0} init.js, init.js.map (main) 44 [rendered]
    [0] ./src/init.js 44 {0} [built]
webpack: bundle is now VALID.

webpack output. This does write the bundle correctly.

Hash: 801e0272a219e10a6229
Version: webpack 1.2.0-beta6
Time: 89ms
      Asset  Size  Chunks             Chunk Names
    init.js  1611       0  [emitted]  main
init.js.map  1353       0  [emitted]  main
   [0] ./src/init.js 44 {0} [built]

I'm running Windows 8.1, and I've tried using older versions (1.2.7 and 1.2.1) of webpack-dev-server. Any help would be appreciated!

content-base with url-parameters

When i use a content base with a second url parameter

--content-base http://mypage/index.html?param1=test&param2=test2 --port 9550 --colors"

During argument-parsing for webpack-dev-server, the & will cut off the remaining url-string and the following arguments as well. So, in this case, a server with a content-base set to http://mypage/index.html?param1=test will start with at the standard port 8080 with no colors.

Write bundle to disk

I'm developing an app that has several entry points โ€” one of which needs a custom html file that I'm generating using a View in my hapi.js server.

Is there a way I can configure the dev-server to write the generated js files to disk? Right now I either have to have another webpack watcher to compile files or stop and manually compile the files when I make a change to that particular part of the code.

Duplicate publicPath-option?

Why is it possible to set the publicPath as an option for the webpack-dev-server? Shouldn't it be derived from the webpack-config?

Firefox forms are double submitting when using webpack-dev-server.js

I've gone through all sorts of grief with my Firefox (not Chrome or IE) forms double submitting and I think that I've tracked it down to webpack-dev-server.js as the cause. I'm trying to do a normal HTML submit and nothing fancy. At first I thought that it was bootstrap doing something strange, but that is not the case. I'm currently not editing any webpack related files and I just have the dev server running in a console window.

What is the dev server doing that could interferre witih forms?

Watch files not required with webpack

Hi! Would it be possible to add to webpack-dev-server and middleware an option to watch also files outside the required ones?
This is needed specially for the HTML files, and maybe some css ones.

Thank you!

Firefox: The character encoding of the HTML document was not declared

I just love webpack ...

Small issue I am sure many people will walk into and that is super easy to fix once and for all,
in firefox, webpack-dev-server generates the following warning whenever the page reloads:

"The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol."

To fix this:

in the head of client/live.html add:

<meta charset="utf-8"/>

Hot mode still supported?

Is the hot mode still supported? It seems like hot is always false in

var hot = false;

I'm trying to set up the hot mode with an inlined webpack-dev-server using the style-loader. The client receives the hot event and the webpack config has the HotModuleReplacementPlugin applied, but the styles are not replaced.

Module not found: Error: Cannot resolve module 'child_process' in ..socket.io

I am new to webpack, I was following this tutorial => http://webpack.github.io/docs/tutorials/getting-started/

Everything worked great until I got to the last section titled "DEVELOPMENT SERVER". After following the instructions, I get the following output (along with more similar errors) when visiting.

http://localhost:8080/webpack-dev-server/

Errors while compiling. App updated with errors. No reload!

(webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'child_process' in /Users/jeberly/work/mydomain.com/webpack/node_modules/webpack-dev-server/node_modules/socket.io/lib
resolve module child_process in /Users/jeberly/work/mydomain.com/webpack/node_modules/webpack-dev-server/node_modules/socket.io/lib

Problem with peerDependencies

There is an issue with the dependencies, though it's currently not a real problem. I just wanted to point out, that it may occur in the future.

Currently webpack-dev-server and webpack-dev-middleware have webpack as peerDependency. This results in the following dependency graph:

myApp
|-------------webpack
|-------------webpack-dev-server
              |-------------webpack-dev-middleware
              |-------------webpack

webpack is installed two times. One time inside of myApp/node_modules/ because it's a peerDependency of webpack-dev-server and one time inside of myApp/node_modules/webpack-dev-server/node_modules/. So when webpack-dev-server calls require("webpack"), the webpack version stored in webpack-dev-server/node_modules/webpack is required instead of the intended myApp/node_modules/webpack.

I think this is a hint that something with the dependencies is wrong. Maybe webpack should be a real dependency of both, because modules with peerDependencies should not require the peerDependency itself (at least thats the definition of a peerDependency).

No reload with `--hot`

I couldn't see much info in the docs about this, so apologies if I'm missing a crucial step.

I've installed webpack and webpack-dev-server globally. I've got a new directory with an index.js:

console.log("Testing webpack...");

And a webpack.config.js:

module.exports = {
    context: __dirname,
    entry: './index.js'
}

And then I'm running it like so:
wepack-dev-server --hot

After some hunting I realized the URL http://localhost:8080/webpack-dev-server/bundle is what I need for the reloading to work. Changing my JS and saving it will show the update in the terminal, but the browser will not reload and nothing new is printed to the console. Any ideas?

A related question:
I'm also trying it regularly, without the --hot command. In this case, I can see the new changes to my JS logged in the console. But it looks like the page is never actually reloaded. This causes the console to never be cleared as I save the file. Is there a way to have it behave like a normal live-reload?

Error: ENOENT, open '/live.bundle.js'

I'm getting the following error when trying to run the dev server:

Error: ENOENT, open '/Users/ronag/tmp2/react-hot-boilerplate/node_modules/webpack-dev-server/client/live.bundle.js'

package.json

{
  "name": "react-hot-boilerplate",
  "version": "0.1.1",
  "description": "Boilerplate for ReactJS project with hot code reloading",
  "scripts": {
    "start": "node server.js"
  },
  "config": {
    "port": 3000,
    "subdomain": null
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
  },
  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
  "devDependencies": {
    "jsx-loader": "^0.11.0",
    "react-hot-loader": "^0.4.3",
    "webpack": "^1.4.0-beta3",
    "webpack-dev-server": "^1.4.10"
  },
  "dependencies": {
    "react": "^0.11.1"
  }
}

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var port = process.env.npm_package_config_port || 3000;

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true
}).listen(port, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
  }

  console.log('Listening at localhost:' + port);
});

Here is the log from npm install

> [email protected] install /Users/ronag/tmp2/react-hot-boilerplate/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished
[email protected] node_modules/react-hot-loader
โ””โ”€โ”€ [email protected]

[email protected] node_modules/react
โ””โ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/jsx-loader
โ”œโ”€โ”€ [email protected] ([email protected])
โ””โ”€โ”€ [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/webpack
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected] ([email protected])
โ”œโ”€โ”€ [email protected] ([email protected], [email protected])
โ”œโ”€โ”€ [email protected] ([email protected])
โ”œโ”€โ”€ [email protected] ([email protected])
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected])
โ””โ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/webpack-dev-server
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected] ([email protected], [email protected])
โ”œโ”€โ”€ [email protected] ([email protected])
โ”œโ”€โ”€ [email protected] ([email protected], [email protected], [email protected])
โ”œโ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
โ”œโ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected])
โ””โ”€โ”€ [email protected] ([email protected], [email protected], [email protected], [email protected])

Multiple bundles with different publicPaths

We are currently attempting to modularize our application a bit more and pulling things into different modules with a folders (eventually repos) each with its own webpack.config file that is lazy loaded (via curljs) when user navigates to page that requires that module.

Each module has a webpack config file has a different publicPath which points to a subfolder for that module. This wont currently work under webpack-dev-server since the dev server publicPath and webpack module need to be the same (well not exactly the same as the dev server publicPath has an additional prefix).

Perhaps it would make sense to have a devServer section in each webpack.config and have the dev server pull the bundle specific options from there rather then a global publicPath option.

Error: Module "jquery" not found in context "."

I'm not able to correctly load modules. It searches under node_modules/webpack-dev-server/node_modules.
My config file here:
https://c9.io/phoscur/filmalbum

var Server = require("webpack-dev-server");
var options = {
    content: "index.jade",

    webpack: {
        output: "bundle.js",
        debug: true,
        filenames: true,
        watch: true,
        "maxChunks": 5,
        "preLoaders": [
            {
                "test": "\\.js$",
                "include": "lib",
                "exclude": ["jam", "web_modules", "node_modules"],
                "loader": "jshint"
            }
        ],
        "amd": {
            "jQuery": true,
            "Backbone": true
        },
        "jshint": {
            "failOnHint": true,
            "globalstrict" : true,
            "laxcomma" : true,
            "laxbreak" : true,
            "loopfunc": true,
            "sub" : true,
            "node" : true,
            "browser" : true,
            "curly" : true,
            "eqeqeq" : true,
            "forin" : false,
            "undef" : true,
            "immed" : true,
            "latedef" : true,
            "newcap" : true,
            "noarg" : true,
            "nonew" : true,
            "trailing" : true,
            "devel": true,
            "es5": true,
            "camelcase": true,
            "regexp": true,
            "unused": true,
        }
    }
};
new Server("client.js", options).listen(process.env.PORT);
console.log("webpack-dev-server running on port", process.env.PORT);

"The package webpack does not satisfy its siblings' peerDependencies requirements!" error when installing webpack-dev-server

SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
COPY Release/validation.node
make: Leaving directory `/home/ubuntu/React/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm ERR! peerinvalid The package webpack does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

npm ERR! System Linux 3.2.0-40-virtual
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install" "webpack-dev-server" "--save-dev"
npm ERR! cwd /home/ubuntu/React
npm ERR! node -v v0.10.12
npm ERR! npm -v 1.2.32
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /home/ubuntu/React/npm-debug.log
npm ERR! not ok code 0

This happens when I run npm install webpack-dev-server --save-dev in my project. I am running Ubuntu and already installed webpack doing npm install webpack -g.

I am probably missing something.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.