Explication détaillée de la configuration et des étapes d'utilisation de webpack-dev-server

Cette fois, je vais vous apporter une explication détaillée des étapes de configuration et d'utilisation de webpack-dev-server. Quelles sont les précautions pour configurer et utiliser webpack-dev-server ? jetons un coup d'oeil.

1Installez le serveur WebPack-dev-server de

Entrez

npm i webpack-dev-server

dans le terminal pour installer webpack- Package dev-server

2. Configurez dev-server

Ajoutez le code

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

dans le script dans le fichier package.json dans webpack.config Ajouter globalement

target:"web"

entrée du terminal

npm i cross-env

installer env

environnement de configurationvariables

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

<.>Ajoutez l'instruction

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

au fichier webpack.config .JS pour déterminer si la valeur de isDev est égale à development

Changez

module.exports en une configuration constante et ajoutez l'instruction

module.exports = config

pour faciliter les changements de configuration

Ajoutez l'instruction

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

dans webpack.config.js 3. Créez une page HTML

Entrée du terminal

npm i html-webpack-plugin

Installer le plugin html-webpack-plugin

Ajouter une instruction dans webpack.config.js

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

Configuration

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

Après avoir terminé les étapes ci-dessus, entrez

npm run dev

dans le terminal. Une fois l'emballage terminé, ouvrez le navigateur et entrez l'adresse localhost : 8000 à. entrez dans la page

Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Comment créer un environnement de bucket familial React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!