简单使用webpack进行打包
需要先安装 node
创建项目目录
在桌面创建项目文件夹webpackStudy
vscode打开文件夹,在终端输入npm init
命令
一直回车即可
在文件夹中出现package.json
然后安装webpack、webpack-cli,npm install webpack --save-dev 和 npm install webpack-cli --save-dev
在文件夹中出现node_modules 、package-lock.json
到这环境已经安装好,接下来进行JS文件打包,在项目下新建demo.js 和 map3d.js
//引入map3d
var 3d = require('./map3d.js');
; (function (global) {
var BNMap = function () {
return K3D;
};
/**地图对象的构造函数,创建一个地图对象*/
//开启严格模式
"use strict";
//兼容CommonJs规范
if (typeof module !== 'undefined' && module.exports) {
module.exports = BNMap;
}
//兼容AMD/CMD规范
if (typeof define === 'function') {
define(function () {
return BNMap;
});
}
//注册全局变量,兼容直接使用script标签引入插件
global.BNMap = BNMap;
})(window);
文件准备好后,执行打包命令,注意由于在安装 webpack
的时候,并不是全局安装
所以运行命令:webpack demo.js -o bunlde.js
会报错
需要通过npx
指令来运行webpack demo.js -o bunlde.js
才可以
成功编译打包demo.js
生成bundle.js
文件
更新 2021年3月17日
随着 webpack 和 webpack cli 版本的更新, 不指定 webpack 版本直接按照上述的步骤无法成功打包,
安装 webpack 指定安装 4.33.0版,webpack cli 指定安装 3.3.11,再按上述步骤才能正常打包