安装webpack-dev-server

npm install webpack-dev-server

webpack-dev-server常用的几个属性

  1. --progress
  2. --profile 
  3. --colors 
  4. --hot
  5. --compress
  6. --inline
  7. --port

package.json

  1. "webpack-dev-server": "^3.10.3",
  2.  "scripts": {
  3.     "start": "webpack-dev-server",
  4.     "build": "webpack"
  5.  }

config.devServer

  1.   config.devServer = {
  2.     // contentBase:`${htmlDIR}/`,
  3.     contentBase:'./dist/',
  4.     host:'127.0.0.1',
  5.     port:'8888',
  6.     hot:true,
  7.     compress: true
  8.   }

扩展

pacage.json

"start:test": "cross-env NODE_ENV=test webpack-dev-server --config webpack.dev.js",
"start:prod": "cross-env NODE_ENV=prod webpack-dev-server --config webpack.dev.js"

webpack.dev.js

let obj = {
  test:'./dist/index.html',
  prod:'./dist/index.html'
}

const contentBase = obj[process.env.NODE_ENV] ? obj[process.env.NODE_ENV] : './public/index.html';
console.log(contentBase,'contentBase');

config.devServer = {
  contentBase,
  host:'127.0.0.1',
  port:'8888',
  hot:true,
  compress: true
}