简单使用webpack进行打包

简单使用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，再按上述步骤才能正常打包