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

ein.

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

um Änderungen zu erleichtern Konfiguration

Anweisung hinzufügen

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

Terminal-Eingabe

npm i html-webpack-plugin

Installations-HTML- Webpack-Plugin-Plugin

Anweisung hinzufügen

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

Konfiguration

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

in webpack.config.js Geben Sie nach Abschluss der obigen Schritte

npm run dev

ein Nachdem die Verpackung abgeschlossen ist, öffnen Sie den Browser und geben Sie die Adresse localhost: 8000 ein, um die Seite aufzurufen.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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!