webpack-dev-server配置與使用步奏詳解

這次帶給大家webpack-dev-server配置與使用步奏詳解，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()
  ]

完成上述步驟後，終端機輸入

npm run dev

打包完畢之後，打開瀏覽器，輸入地址本地主機：8000即可進入頁面

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

應該如何建立webpack react開發環境

如何建立React全家桶環境

以上是webpack-dev-server配置與使用步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！