This article introduces a brief discussion on the configuration and use of webpack-dev-server. It is shared with you. The details are as follows:
1 Installed WebPack-dev-server
Enter at the terminal
npm i webpack-dev-server
Install webpack-dev-server package
2. Configure dev-server
Add code to scripts in file
"dev":"WebPack-dev-server --config ”
Add globally in the file
target:"web"
Terminal input
npm i cross-env
Install env
Configure environment variables
"build": "cross-env NODE_ENV=production webpack --config ", "dev": "cross-env NODE_ENV=development webpack-dev-server --config "
Add statements in .JS file
const isDev = .NODE_ENV ==='development'
Determine whether the value of isDev is equal to development
Change to constant configuration and add statements
= config
Configurable to change configurations
Add a statement in
if（isDev）{
=“＃Cheap modules-EVAL-Source Mapping”//Code Mapping = {
port:8000,//Start the service listening port host:'0.0.0.0'，//Can be accessed through localhost overlay:{//Show error message on the page errors：true，
},
open:true，//The browser is automatically opened when starting webpack-dev-server hot:true //Enable hot update }
(
new ()，
new ()//Hot more related plug-ins )
}
3. Create HTML page
Terminal input
npm i html-webpack-plugin
Install html-webpack-plugin plugin
Add a statement in
const HTMLPlugin = require('html-webpack-plugin')
Configuration
plugins: [
new ({
'': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
After completing the above steps, the terminal input
npm run dev
After packaging, open the browser, enter the address, local host: 8000 to enter the page
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.