Detaillierte Erläuterung der Konfigurations- und Verwendungsschritte des Webpack-Dev-Servers

Dieses Mal werde ich Ihnen die Schritte zum Konfigurieren und Verwenden des Webpack-Dev-Servers ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Konfigurieren und Verwenden des Webpack-Dev-Servers? Werfen wir einen Blick darauf.

1Installieren Sie den WebPack-Dev-Server von .

Geben Sie im Terminal

npm i webpack-dev-server

Installieren Sie den WebPack-Dev-Server Paket

2. Dev-Server konfigurieren

Fügen Sie den Code im Skript in der package.json-Datei hinzu

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

Global in der webpack.config .js-Datei

target:"web"

Terminaleingabe

npm i cross-env

Umgebung installieren

Umgebung konfigurierenVariablen

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

In webpack.config hinzufügen. JS-Datei Die Anweisung

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

bestimmt, ob der Wert von isDev gleich der Entwicklung ist

Ändern Sie module.exports in eine konstante Konfiguration und fügen Sie die Anweisung

module.exports = config

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. HTML-Seite erstellen

npm i html-webpack-plugin

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

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

npm run dev

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

So erstellen Sie eine React-Familien-Bucket-Umgebung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Konfigurations- und Verwendungsschritte des Webpack-Dev-Servers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!