Every time you need to compile your code, running npm run build manually becomes cumbersome. Use webpack-dev-server It can help you to compile code automatically when the code changes. It provides a simple web server and can be reloaded in real time.
I. installation
npm install --save-dev webpack-dev-server //perhaps yarn add webpack-dev-server --dev
Successful installation
yarn install v1.17.3 [1/4] Resolving packages... success Already up-to-date. Done in 0.41s. F:\GitHub\WebpackStudyNotes\12- webpack Automatic construction\demo12> F:\GitHub\WebpackStudyNotes\12- webpack Automatic construction\demo12> F:\GitHub\WebpackStudyNotes\12- webpack Automatic construction\demo12> F:\GitHub\WebpackStudyNotes\12- webpack Automatic construction\demo12>yarn add webpack-dev-server --dev yarn add v1.17.3 [1/4] Resolving packages... info There appears to be trouble with your network connection. Retrying... [2/4] Fetching packages... info There appears to be trouble with your network connection. Retrying... info fsevents@1.2.9: The platform "win32" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 87 new dependencies. info Direct dependencies └─ webpack-dev-server@3.7.2 info All dependencies ├─ accepts@1.3.7 ├─ ansi-colors@3.2.4 ├─ ansi-html@0.0.7 ├─ array-flatten@1.1.1 ├─ async@1.5.2 ├─ batch@0.6.1 ├─ body-parser@1.19.0 ├─ bonjour@3.5.0 ├─ buffer-indexof@1.1.1 ├─ cliui@4.1.0 ├─ compressible@2.0.17 ├─ compression@1.7.4 ├─ connect-history-api-fallback@1.6.0 ├─ content-disposition@0.5.3 ├─ cookie-signature@1.0.6 ├─ cookie@0.4.0 ├─ deep-equal@1.0.1 ├─ default-gateway@4.2.0 ├─ destroy@1.0.4 ├─ detect-node@2.0.4 ├─ dns-equal@1.0.0 ├─ dns-packet@1.3.1 ├─ dns-txt@2.0.2 ├─ ee-first@1.1.1 ├─ eventemitter3@3.1.2 ├─ eventsource@1.0.7 ├─ express@4.17.1 ├─ faye-websocket@0.10.0 ├─ finalhandler@1.1.2 ├─ follow-redirects@1.7.0 ├─ forwarded@0.1.2 ├─ get-caller-file@1.0.3 ├─ handle-thing@2.0.0 ├─ hpack.js@2.1.6 ├─ html-entities@1.2.1 ├─ http-deceiver@1.2.7 ├─ http-parser-js@0.4.10 ├─ http-proxy-middleware@0.19.1 ├─ http-proxy@1.17.0 ├─ internal-ip@4.3.0 ├─ ip-regex@2.1.0 ├─ ip@1.1.5 ├─ ipaddr.js@1.9.1 ├─ json3@3.3.3 ├─ killable@1.0.1 ├─ loglevel@1.6.3 ├─ media-typer@0.3.0 ├─ merge-descriptors@1.0.1 ├─ methods@1.1.2 ├─ mime-db@1.40.0 ├─ mime@2.4.4 ├─ multicast-dns-service-types@1.1.0 ├─ multicast-dns@6.2.3 ├─ negotiator@0.6.2 ├─ node-forge@0.7.5 ├─ obuf@1.1.2 ├─ on-headers@1.0.2 ├─ opn@5.5.0 ├─ original@1.0.2 ├─ p-retry@3.0.1 ├─ path-to-regexp@0.1.7 ├─ portfinder@1.0.21 ├─ proxy-addr@2.0.5 ├─ querystringify@2.1.1 ├─ raw-body@2.4.0 ├─ require-main-filename@1.0.1 ├─ retry@0.12.0 ├─ select-hose@2.0.0 ├─ selfsigned@1.10.4 ├─ serve-index@1.9.1 ├─ serve-static@1.14.1 ├─ sockjs-client@1.3.0 ├─ sockjs@0.3.19 ├─ spdy-transport@3.0.0 ├─ spdy@4.0.0 ├─ thunky@1.0.3 ├─ type-is@1.6.18 ├─ unpipe@1.0.0 ├─ utils-merge@1.0.1 ├─ uuid@3.3.2 ├─ wbuf@1.7.3 ├─ webpack-dev-middleware@3.7.0 ├─ webpack-dev-server@3.7.2 ├─ websocket-extensions@0.1.3 ├─ wrap-ansi@2.1.0 ├─ yargs-parser@11.1.1 └─ yargs@12.0.5 Done in 135.14s.
2. Edit webpack.config.js
Modify the configuration file and tell the development server (dev server) where to find the file:
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase:"./dist"
},
plugins:[
new HtmlWebpackPlugin({
title: "10- webpack Automatic generation index.html"//Configure title Properties
}),
new CleanWebpackPlugin(),
]
};
The above configuration tells webpack dev server to set up a service under localhost:8080 and use the file under dist directory as an accessible file.
3. Edit package.json
{
"name": "demo02",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
}
}
IV. run the start command
npm run start //perhaps yarn start
Successful operation
yarn run v1.17.3
$ webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
i ｢wdm｣: Hash: 80ca53e91aed9fc00e90
Version: webpack 4.35.3
Time: 653ms
Built at: 2019-07-20 16:04:54
Asset Size Chunks Chunk Names
index.html 203 bytes [emitted]
main.bundle.js 360 KiB main [emitted] main
Entrypoint main = main.bundle.js
[0] multi (webpack)-dev-server/client?http://localhost ./src/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 250 bytes {main} [built]
+ 18 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.
V. run index.html
Open in Chrome http://localhost:8080/ , you can see Hello webback! Word
Vi. edit index.js
//Generate a div tag with Hello webpack!
function component() {
let element = document.createElement('div');
element.innerHTML = "Hello webpack !Hello!";
//Add class
return element;
}
//Add the generated div tag to the body
document.body.appendChild(component());
Then save
The page in the browser automatically refreshes and shows Hello webback! Hello!
Reference link