Explication détaillée de la configuration et des étapes d'utilisation de webpack-dev-server-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-28 15:52:36

original

2031 Les gens l'ont consulté

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

Copier après la connexion

dans le terminal pour installer webpack- Package dev-server

2. Configurez dev-server

Ajoutez le code

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

Copier après la connexion

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

target:"web"

Copier après la connexion

entrée du terminal

npm i cross-env

Copier après la connexion

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"

Copier après la connexion

<.>Ajoutez l'instruction

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Entrée du terminal

npm i html-webpack-plugin

Copier après la connexion

Installer le plugin html-webpack-plugin

Ajouter une instruction dans webpack.config.js

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

Copier après la connexion

Configuration

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

Copier après la connexion

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

npm run dev

Copier après la connexion

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!