1.5.2.4 第三步，打包

优质

小牛编辑

129浏览

2023-12-01

webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack 是使用commonJS的形式来编写脚本，同时对AMD/CMD的也能很全面地支持，因此方便对旧项目进行代码迁移。具有开发便捷，扩展性强，插件机制完善的优势，同时支持React热插拔。本节将介绍如何安装并配置webpack，完成模块打包，将打包后的文件引入HTML文件中，实现地图浏览功能。

打开命令行窗口，使用cd命令定位至项目根目录，使用npm安装webpack，将自动获得最新版本的webpack，本书编写时，webpack最新版为4.17.2：

npm install --save-dev webpack

使用V4及以上版本时，还需安装CLI：

npm install --save-dev webpack-icl

安装完成后，查看package.json文件，其中已新增了devDependencies字段，包含webpack和webpack-icl：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "leaflet": "^1.3.4"
  },
  "devDependencies": {
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  }
}

webpack是一个安装即用的打包工具，不需要您使用配置文件也可运行，运行时它会自动采取默认配置。默认您的项目的入口点是src/index，输出至dist/main.js，将其中的结果缩小并优化生产。而通常在您的项目中，您会进行一些功能扩展，自定义入口点和输出项等，就需要在项目根目录下创建一个webpack.config.js文件，进行编写并保存。示例如下：

var webpack = require('webpack');
module.exports = {
    //页面入口文件配置
    entry: ["./src/FirstMap.js"],
    //入口文件输出配置
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    //其它解决方案配置
    resolve: {
        extensions: ['.js', '.json', '.css']
    },
    //插件项
    plugins: []
}

SuperMap iClient for Leaflet 使用了 ES6 语法，为了兼容不支持 ES6 语法的浏览器，需要在打包的过程中进行一些配置，包括语法转换的处理。需要在 webpack.config.js 的配置文件的 module 中加入配置，如下：

var webpack = require('webpack');
module.exports = {
    //页面入口文件配置
    entry: ["./src/FirstMap.js"],
    //入口文件输出配置
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    //其它解决方案配置
    resolve: {
        extensions: ['.js', '.json', '.css']
    },
    //插件项
    plugins: [],
module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        include: [
            path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
            path.resolve(__dirname, "node_modules/@supermap/iclient-leaflet"),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, "node_modules/elasticsearch"),
        ],
        loader: 'babel-loader',
        options: {
            presets: ['es2015']
        }
    }]
}
}

其中：

entry：指定webpack应该使用哪个模块来构建其内部依赖关系图。 webpack将确定入口点所依赖的其他模块和库（直接和间接）。
默认情况下，其值为./src/index.js，但您可以配置entry属性来指定不同的（或多个入口点）。
output：对应输出项配置
- path ：输出文件目标位置
- filename：输出文件的名称
resolve：用于定义模块的解析方式。

webpack配置完成后，在package.json文件中增加构建项，在scripts属性中增加"build":"webpack"并保存。如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "leaflet": "^1.3.4"
  },
  "devDependencies": {
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  }
}

在项目根目录下打开命令行窗口，执行打包命令：

npm run build

webpack将根据配置在当前目录下生成dist文件夹，其中包含app.js文件。