1、安裝webpack-dev-server
cnpm install webpack-dev-server -D

2、package.js同級目錄下新建package.config.js檔案。程式碼如下：
 

module.exports={
  entry:'',
  output:'',
  devServer:{
    port:9999,
    host:'localhost'
  }
}

3、package.json檔案

{
 ...,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },
 ...,
}
 

本文已經定義過process

大致配置：webpack.config.js

// 環境變數
const env = require('yargs').argv.env
console.log(env);

const serverInfo = {
    apiUrl: 'https://mp.csdn.net/',
    websockUrl: 'https://mp.csdn.net/'
}

if (env == 'prod') {
    serverInfo.apiUrl = 'https://mp.csdn.net/'
    serverInfo.websockUrl = 'https://mp.csdn.net/'
}

...

plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      process:{
        env: {
        serverInfo: JSON.stringify(serverInfo)
      }}
    }),
]
 

在index.js中可直接使用 const wsHost = process.env.serverInfo.websockUrl;訪問

4、process 環境變數未定義報錯

在專案過程中出現一個問題，新增webpack-dev-server中代理服務成功，但process變數取不到

處理方式：新增html-webpack-plugin

安裝html-webpack-plugin，

npm i --save-dev html-webpack-plugin

附地址npm連結https://www.npmjs.com/package/html-webpack-plugin

在webpack.config.js引入html-webpack-plugin 

const HtmlPlugin = require('html-webpack-plugin');

...

plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      process:{
        env: {
        serverInfo: JSON.stringify(serverInfo)
      }}
    }),
    new CleanPlugin(['build']),
    new CopyPlugin([{
      from: path.resolve(__dirname, 'js'),
      to: path.resolve(__dirname, 'build/js')
    }, {
      from: path.resolve(__dirname, 'css'),
      to: path.resolve(__dirname, 'build/css')
    }]),
    
    // 增加如下程式碼段
    new HtmlPlugin({
      template: './index.html',
    })
]

package.json檔案配置 

...

"scripts": {
    "build:test": "webpack --config ./webpack.config.js --progress --color --env test ",
    "build:pre": "webpack --config ./webpack.config.js --progress --color --env pre",
    "build:prod": "webpack --config ./webpack.config.js --progress --color --env prod",
    "dev": "webpack-dev-server --config ./webpack.config.js --hot --env test"
  },

...

啟動服務：npm run dev 

訪問：http://localhost:9999/ 即可除錯

附：webpage遇到一個警告⚠️

1）The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior

查了下需要配置

"scripts": {
    "start": " --mode development",
    "build": "--mode production",
  }

修改配置dev

...

"scripts": {
    "build:test": "webpack --config ./webpack.config.js --progress --color --env test ",
    "build:pre": "webpack --config ./webpack.config.js --progress --color --env pre",
    "build:prod": "webpack --config ./webpack.config.js --progress --color --env prod",
    "dev": "webpack-dev-server --config ./webpack.config.js --mode development --hot --env test"
  },

...

完。