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

npm i webpack-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

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

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

Determine whether the value of isDev is equal to development

Change

.exports to a constant configuration and add the statement

module.exports = config

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()//热更相关插件
 )
}

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:

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!