1.5.2.4 第三步,打包
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文件。