Webpack_dev_server
Details
- start express server at localhost 8008 and serve assets out of memory
- uses
https://github.com/webpack/webpack-dev-middleware
under the hood
Config
devServer.contentBase
link: https://webpack.js.org/configuration/dev-server/#devservercontentbase
- Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence.
Example
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Res
Options
- --hot: hot module reloading
- --open Open the default browser, or optionally specify a browser name
- --config Path to the config file [string][default: webpack.config.js or webpackfile.js]
Example
"start": "webpack-dev-server --mode development --open",
Quickstart
npm install webpack-dev-server --save-dev
- cli usage
node_modules/.bin/webpack-dev-server
Use
debug react app
id: 0c1a47d0-b584-4c7c-80c3-6683c6e4a34b
-
install debugger for chrome
-
add configuration
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
},
{
"type": "node",
"request": "launch",
"name": "build",
"program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
"args": [
"--config",
"webpack.config.prod.js"
],
"autoAttachChildProcesses": true,
"stopOnEntry": true
}
]
}
- start
"start:alt:debug": "node --inspect-brk ./node_modules/.bin/webpack-dev-server --mode development --open --config example/webpack.config.yaml.js",