DEPRECATED. Please go back to webpackdev-server
. You can create an issue to have certain features implemented in webpack-dev–server
.
Why webpack service
has been deprecated?
- The creator stopped working on the package.
- For developers, there are two misleading development servers.
- Two packages serving the same purpose are difficult to maintain.
-
Some
dependencies
are not available to fixes/implement new features/etc (https://www.npmjs.com/package/webpack-hot-client and https://github.com/shellscape/koa-static) and there’s nothing we can do here. - The webpack -dev-server has been made stable.
We appreciate you using webpack
. We are sorry for this inconvenience. These situations will be avoided in the future.
For any questions, gitter
(or de slack
) are your best bets.
An agile, flexible, modern webpack development server
Requirements
You will need to have at least Node.js V6.9.0 installed and Webpack V4.0.0.
Browser Support
The module relies on native HTMLSockets
via webpack-hot-client
. This means that only the browsers supporting native HTMLSocket
are supported. It usually refers to the latest two major browser versions. You can view the compatibility table.
Please note that we won’t accept any requests to modify this aspect of the module.
Getting Started
First, install webpack serve
.
£npm webpack-serve install --save -dev
CLI
£webpackserve --help
An agile, flexible, and modern webpack development server
Utilisation
$ webpack-serve [...options
Optional
--clipboard Specify if the server should save the server URI on the clipboard. (Default: true)
--config This is the webpack configuration to use. Alias for
--content This is the path to which static content will appear (default: process.cwd).
--dev-ware Set options for webpack-dev-middleware. You can find it here: --dev-ware.publicPath /
--Help Show usage information and other options
--host To whom the app must be able to bind
Webpack-hotclient options You can use the following: --hot-client.host localhost
You can disable webpack's hot-client by using --no-hotclient
http2 Instruct server to use HTTP2
--https-cert Set the path for an SSL Certificate's filesystem. You must pair it with a key
--https-key Set the path for an SSL certificate's filesystem. You must pair it with a certificate
--https-pass Enter a passphrase that will enable https. You must pair it with a pfxfile
--https - Specify the path to the filesystem of an SSL file. You must pair it with a passphrase
--loglevel Limit the number of console messages sent by a process to a specified level.
Levels: info, alert, silence, bug, debug and trace
--log–time To instruct the webpack server and dependencies loggers to display a timestamp
--hmr Define whether Hot Module Replacement Patches should be applied by the client (default: true).
--reload Set the preference of the middleware to reload the page in case there are build-errors (default: true).
--open Instruct app to be opened in default browser
--open app The app name to open, or an array
The app name and argument for the app are included in this file
--open Path The path to an app that you are using as a web browser.
--port This is the port on which the app should listen. default: 8080
--require -r Load one or more modules prior to loading the webpack configuration
--version Display the version of webpack-serve
Notice: A boolean flag may be replaced by a value with the prefix 'no'.
For example, --no reload, rather than --reload=false
Some examples
$ webpack.config.js -no-reload
$ webpack-serve --config ./webpack.config.js --port 1337
You can omit $ webpack_serve # configuration for webpack V4+
Notice: CLI uses your webpack server local installation when it is available.
Running the CLI
There are several ways to use the base CLI command and start Webpack-serve
.
£webpack.config.js - Webpack-serve
£webpack-serve --config ./webpack.config.js
Both of these commands can be interchanged. Both commands instruct webpack_serve how to load the configuration from the given path. The flag was left in because people love to be more verbose.
£webpack-serve
You can also ask Webpack-serve
for a webpack build to be started without any configuration. To ensure a successful webpack build, you will need to conform to the default zero-config configurations.
config webpack-serve
It is possible to save and configure webpack service
options in many different ways. This module uses Cosmoconfig which allows you define webpack–serve
options the following:
-
Your package.json should be saved in a
serv
file -
You can save it in a
.serverc
file or.serverc.json
File, either in JSON oder YML. - A serve.config.js file, which exports the CommonJS module (just as webpack).
Most people keep service
options intact in webpack.config.js
. However, any of these options can be used in combination with . Both sources will then merge. This feature can prove useful in setups where multiple configs have the same
webpack_serve
options but need subtle differences.
webpack.config.js
Example
const
The path
=
Please enter
(
The 'path'
(
Module
Exports
=
{
Context
You can find this link:__dirname
devtool
You can find this link:Source-map
Enter
You can find this link:You can find more information at http://www.smart.net/
"./app.js".
[
Produce
You can find this link:{
Name of the file
You can find this link:./output.js
The path
You can find this link:The path
resolve
(
__dirname
(
|•||}
Serve
You can find this link:{
|•||}
|•||}
Webpack Config serve
Property
HTMLpack-serve
allows you to use the property of your webpack.config file. It may also contain any supported options.
Set the Config mode
The following pattern is recommended if you feel that the mode
property within your webpack configuration file should be changed dynamically:
mode: process.env.WEBPACK_SERVE ? Mode: process.env.WEBPACK_SERVE
API
If you are using the API direct, your main point of entry is the Serve
function. It is the default export for the module.
const
Serve
=
Please enter
(
"webpack-serve"
(
const
argv
=
{
|•||}
const
Configuration
=
Please enter
(
'./webpack.config.js'
(
Serve
(
argv
{
Configure|•||}
(
then
(
(
End result
(
=>
{
//
|•||}
(
Returns: Promise
Resolves:
Type: Koa
One Koa
instance, with an server attribute and stop
methods, used to programatically end the server.
Type: Function
An function that links a service event-name to another function. Read Events.
Type:
A copy of the internal option
object which was used by this module can be accessed as a freeze.
argv
Type:
Not required
An object which contains either minimist of the yargs parser
.
options
Type:
Not required
An object that describes options to configure the server.
See Add On Features.
Type:
Default: null
One example of a Webpack
compiler. A passed compiler’s code will be considered precedence over configuration
passed into options.
Do not use serv
as a configuration to build the compiler instance.
Type:
Default:
This object contains the configuration to create a new compiler instance.
Type: String
Default: Process.cwd()
A path (or array of paths) from which the content will be delivered. The paths specified should be either absolute or fully-qualified, and resolved by the Filesystem.
Notice: The webpack files take precedence over the content
paths static files.
To instruct the server to give static files precedence, use the add
option, and call middleware.content()
before middleware.webpack()
:
Add:(
App
Mid-ware
Options
(
=>
{
Mid-ware
Continue reading
(
(
Mid-ware
webpack
(
(
|•||}
Find out more information about the add option in Additional Features.
Type: Boolean
Default: true
True if the above is true then the server will copy server URIs to the clipboard once the server has been started.
Type:
Default:
An object containing options for webpack-dev-middleware.
Type:
Default: 'localhost'
The host on which the server is to listen. For example: 10.10.11'
Notice: If this value is not specified for hot.host
or hot.server
, -webpack-serve
might throw an exception. This is to ensure that the Server and HTMLSocket Server play well together.
Type: Obj
Default:
An object that contains options for Webpack-hot-client. This false
option will totally disable Webpack-hot-client
, and any automatic Hot Module replacement functionality.
Type: Boolean
Default: false
Node v9 and higher will support HTTP2 when this option is set to true
Type:
Default: null
This option instructs Webpack-Serve to create the webpack bundle with accompanying content and send it through a secure webserver. You should match the properties of this object:
{
Key
You can find this link:fs
readFileSync
(
'...key
(
// PEM-format private keys
Certificate
You can find this link:fs
readFileSync
(
'...cert
(
// Certificate chains in the PEM format.
pfx
You can find this link:String
>
// PFX encoded private key or PKCS12 coded certificate chain. PassphraseString
>
// One shared passphrase for one private key, and/or a PXX.|•||}
To learn more, see the Node documentation. Please see the SSL Certificates to HTTPS section.
Type:
Default: information
Instruction Webpack-serve
for output of information to console/terminal at levels greater than the set level. There are no restrictions on the levels of validity
You can find more information at http://www.smart.net/
Track
Debug
Information
Warning
The error
Silent
[
Type: Boolean
Default: false
For each log line, prepend the [HH.mm.ss] timestamp by instructing webpack_serve
Type:
Default: null
Sometimes it is useful to subscribe from events via the module’s event bus while you are running webpack-serve
directly from your command line. For this purpose, you can use the option. You can use this option to match a Key:handler
or Function
Pattern. Example:
On{
'build-started'
You can find this link:(
(
=>
{
console
log
(
Get the construction process started
(
|•||}
|•||}
Open
Type: Boolean
Default: false
The module is instructed to open the bundle via a browser. Accepts an Object
which matches.
{
app
You can find this link:String
>
// Name of the browser application to be opened. pathString
>
// Enter the url path of your server for open.|•||}
Use the Open
option to disable the Clipboard
Option.
port
Type: #
8080
Port on which the server should listen.
Events
Webpack-serve
generates selected events that can be subscribed. Every event will be emitted by a single Object
parameter. It contains names for the data.
Here’s an example:
const
Serve
=
Please enter
(
"webpack-serve"
(
const
argv
=
{
|•||}
const
Configuration
=
Please enter
(
'./webpack.config.js'
(
Serve
(
argv
{
Config|•||}
(
then
(
(
Server
(
=>
{
Server
(
'listening'
(
{
ServerOptions|•||}
(
=>
{
console
log
(
'happy fun time'
(
|•||}
(
|•||}
(
Arguments
compiler
A compiler will emit this signal when it has begun a build.
Arguments
Stats
stats
Comiler compiler
A compiler completes a build.
Arguments
Stats
HTML3_ json
Compiler compiler
A compiler encountered an error, or when a build is experiencing errors.
Arguments
Stats
HTML3_ json
compiler editor
When a compiler encounters a warning or when a build contains warnings.
listening
Arguments
net.Server
Object
choices
This is when the server listens for connections.
SSL Certificates for HTTPS
webpackserve
, unlike webpackdev-server does not include SSL Certificate generation nor a certificate to be used with HTTPS configurations. Due to the complex nature of webpack use-cases and past security concerns, this is largely due to the lack of SSL Certificate generation.
We recommend one path that allows users to create SSL Certificates efficiently and securely. The Devcert-cli is an excellent project which automates creating trusted SSL Certificates that work beautifully with webpack–serve
.
Add-On Features
HTMLpack-serve
‘s core philosophy is to keep the feature set small and give users familiar, portable methods to use the same features as those using webpackdev-server
. It makes it much simpler to maintain the module, which in turn benefits the user.
webpackserve
is flexible, making it easy to add on features. This can be leveraged using the add
option. This option’s value should match the following signature.
Add:(
App
Mid-ware
Options
(
=>
{
//
|•||}
function parameters
-
app
Using the underlying Koa app -
middleware
An object containing accessor functions to call bothwebpack-dev-middleware
and thekoa-static
middleware. -
Options
– The internal options object used inWebpack-Serve
Some add-on patterns might require you to modify the order of the middleware in the app
. You will need to use the middleware
functions if you are adding routes, or using separate routers with the App
. webpack_serve
will recognize these calls and not run them again. HTMLpack-serve
could execute them both in default order, which is the last line.
Add:(
app
Mid-ware
Options
(
=>
{
// We need to manage the Middleware Order since we manipulate it.
// Add these two middleware functions.
Mid-ware
webpack
(
(
Mid-ware
Continue reading
(
(
// router must be the final middleware installed
app
Make use
(
Router
Routes
(
(
(
|•||}
Here are some addon patterns and recipe that you will find in docs/addons.
Add-ons to Community
Please note: This list contains Webpack-serve
Add-ons that have been created by members of the community. A module’s inclusion in the list is not an indication that it has been chosen or preferred over other modules.
- webpack-serve-waitpage: Provides build progress in the client during complilation.
- webpack-serve-overlay: Provides an error and warning information overlay in the client.
Contributing
Thank you for your contribution! We appreciate your contributions! Please read the contributing guidelines.