webpack--devserver开发服务器

1 安装：npm i -D webpack-dev-server@2

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^3.10.3"
  }
}

2 配置脚本：--config webpack.config.js用来指定webpack配置文件路径，如果为webpack.config.js，者可以省略

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^3.10.3"
  }
}

3 运行：npm run start，因为是start，所以可简化为npm start。运行步骤：会先打包，再运行

4 测试：浏览器中打开：http://localhost:8080/

webpack.config.js中配置devserver：open，自动打开；port，服务器运行端口等

const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');

module.exports={
  entry: './src/main.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: 'app.js'
  },
  plugins:[
    new HtmpWebpackPlugin({
      filename: 'app.html',
      template: './src/index.html'
    })
  ],
  devServer:{
    open: false, //是否自动打开浏览器
    port: 9000, //使用的端口号
    contentBase: './src', //如果没找到资源者到指定目录查找
    publicPath: '/appname/' //资源上下文路径，也就是http://localhost:9000/appname/
  }
}