Detailed explanation of webpack-dev-server configuration and usage steps

This time I will bring you a detailed explanation of the steps for configuring and using webpack-dev-server. What are the precautions for configuring and using webpack-dev-server? The following is a practical case. Let’s take a look. .

1Install 's WebPack-dev-server

Enter

npm i webpack-dev-server

Install webpack-dev-server package# in the terminal

##2. Configure dev-server

Add code in the script in the package.json file

"dev":"WebPack-dev-server --config webpack.config.js”

Globally in the webpack.config.js file Add

target:"web"

Terminal input

npm i cross-env

Install env

Configure environment

Variables

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

Add in webpack.config .JS file Statement

const isDev = process.env.NODE_ENV ==='development'

Determine whether the value of isDev is equal to development

Change

module

.exports to a constant configuration and add the statement

module.exports = config

to facilitate changes Configuration

Add statement in webpack.config.js

if（isDev）{
 config.devtool =“＃廉价模块-EVAL-源映射”//代码映射
 config.devServer = {
  port:8000,//启动服务监听端口
  host:'0.0.0.0'，//可以通过localhost访问
  overlay:{//在页面上显示错误信息
   errors：true，
   },
   open:true，//启动webpack-dev-server时自动打开浏览器
   hot:true //启用热更
 } 
 config.plugins.push(
  new webpack.HotModuleReplacementPlugin()，
  new webpack.NoEmitOnErrorsPlugin()//热更相关插件
 )
}

3. Create HTML page

Terminal input

npm i html-webpack-plugin

Installation html-webpack-plugin plug-in

Add statement in webpack.config.js

const HTMLPlugin = require('html-webpack-plugin')

Configuration

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()
  ]

After completing the above steps, enter

npm run dev

in the terminal After packaging is completed, open the browser and enter the address localhost: 8000 to enter the page

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to build a webpack react development environment

How to build a React family bucket environment

The above is the detailed content of Detailed explanation of webpack-dev-server configuration and usage steps. For more information, please follow other related articles on the PHP Chinese website!