在OpenLayers 中使用Webpack，官方已经有现成的源码了，点击demo可以直接下载。

1修改版本

下载的源码中，OpenLayers的版本号默认是5.1.2的，现在最新的版本是6.1.1,如果需要换成最新的版本，需要修改package.json文件中ol的版本号，换成对应的版本号即可。

"dependencies": {
    "ol": "^5.1.2"
  }

2安装依赖项

用终端进入项目的目录，然后再执行npm install命令安装相应的依赖项。

3编译打包

安装完成后，执行npm run build进行编译打包。

4运行

打开index.html可以直接查看运行后的效果，不出意外，将看到完整的地图。

5搭建本地运行环境

官网的例子只是简单的进行打包，但如果在真正开发的时候如果每改一些代码再进行打包预览，是相当麻烦的，好在Webpack有一个webpack-dev-server插件来搭建一个本地运行环境，安装该插件后，可以通过浏览器来实时预览修改后的代码。具体步骤如下所示：

1. 首先使用npm i -g webpack-dev-server命令进行安装。
2. 安装好后打开webpack.config.js文件，然后再文件中添加devServer相关的配置信息，如下所示：

const webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'MapKit.js'
  },
  devServer: {
    port:7788,//控制端口
    open:true //是否自动打开默认浏览器
  }
};

3：执行命令
为了方便执行命令，将命令配置在scripts中，如下所示：

 "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js --mode production"
  },

配置好后，再执行npm run dev就要以启动一个本地服务来预览了。
个人博客