淺談webpack-dev-server的配置和使用

2024-05-06 16:44:28

字體：大中小

來源：轉載

供稿：網友

本文介紹了淺談webpack-dev-server的配置和使用，分享給大家，具體如下：

1安裝的WebPack-dev-server

在終端輸入

npm i webpack-dev-server

安裝webpack-dev-server包

2.配置dev-server

在package.json文件中的腳本中添加代碼

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

在webpack.config.js文件中全局添加

target:"web"

終端輸入

npm i cross-env

安裝env

配置環境變量

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

在webpack.config .JS文件中添加語句

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

判斷isDev的值是否與development相等

將module.exports改為常量的配置并添加語句

module.exports = config

可以方便更改配置

在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()//熱更相關插件 )}

3.創建HTML頁面

終端輸入

npm i html-webpack-plugin

安裝html-webpack-plugin插件

在webpack.config.js中添加語句

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

配置

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

完成以上步驟后，終端輸入