缘由

今天领导给我一个纯js引擎，我通过yarn run start启动后发现是

这样很好奇是怎么做到的 通过询问说是通过webpack实现的

通过查看主要是通过webpack-dev-server来实现的。

webpack-dev-server

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。

1.提供 HTTP 服务而不是使用本地文件预览；

2.监听文件的变化并自动刷新网页，做到实时预览；

3.支持 Source Map，以方便调试。

通过express构建了两个出口 output和devServer

devServer就是静态资源出口 也就是生成了上面那个。

新建项目

新建项目后通过yarn init 初始化 安装 这三个

"webpack": "^4.34.0",
"webpack-cli":"3.3.4",
"webpack-dev-server": "^3.7.2"

构建项目结构 新建文件

dev(开发环境） prod(生产环境）

webpack.dev.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.js',//入口文件
  //输出
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'gisui.js',
    library: 'Gisui',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  devServer: {
    contentBase: './',//根目录
    publicPath: '/dist/',
    hot: true,//热跟更新
    overlay: true,
    open: false
  },
  devtool: 'source-map',
  node: {
    fs: 'empty'
  }
}

在package.json文件中添加启动命令

  "scripts": {
    "start": "webpack-dev-server --config build/webpack.dev.config.js"
  },

启动即可