我尝试着写了一个一句话的js文件让webpack打包,然后打包后的文件多加了一堆代码,看上去是负责模块提取的。
如果让gulp打包,gulp基本上会原封不动地把这个文件打包,打包后也就这一句话(不加插件的话)。
是不是说如果项目结构简单的话用gulp会比较好点,感觉在这种情况下webpack多了很多无用代码。
也许我的描述本身会有问题,我确实不太确定gulp是否可以和webpack类比,因为也有很多人把webpack放在gulp里面使用。但目前公司的业务里我感觉gulp和webpack(+express)是发挥的相同的功能。如果我的理解有问题,也希望大家能给我解惑。
附代码:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
var txt = 'Hello world!' // 这句是我原文件写的。
/***/ })
/******/ ]);
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
webpack当然可以用于打包结构不那么复杂,模块不那么多的项目。但是这样的用法肯定没有发挥webpack的优势。我觉得
gulp和webpack的侧重点还是不一样。webpack更侧重于打包(module bundler)。以js文件为入口,将你的图片,样式等内容也当做module打包进来,根据你的配置可以拆分成一个一个的chunk.然后这些chunk之间有一定的依赖关系。这应该是webpack最核心的东西:分析不同模块之间的依赖关系,并抽成一个一个的chunk。举个非常简单的例子:
lazyload(懒加载)webpack1.x和webpack2里面都提供了分包异步加载文件的API.在你通过webpack完成构建后,webpack会根据你需要进行异步加载的配置信息输出单独的一个chunk。在你一般进行单页应用开发的时候,有时候需要到特定的路由才需要这个
chunk文件,那么webpack已经帮你完成了这个chunk抽离的工作。而gulp是做不到这一点具体的
webpack1.x和webpack2的分包及异步加载的套路可以看我写的2篇blog:webpack分包及异步加载套路
webpack2异步加载套路
另外就是楼主给的
demo说出现了很多无用代码,我觉得可能是楼主没有具体的分析webpack将代码打包编译后是怎么执行的。除了你自己的写的代码,上面输出的一坨东西都是webpack编译后的runtime代码,主要提供了模块的加载,模块的缓存,模块的执行等等一系列的方法。最常用单页面
webpack没gulp的功能性强大、好像现在的单页、vue或者react都用了webpack、做一个主入口、
多入口多页面的还是用gulp好些吧
和框架搭档,如vue,react等等,一般用webpack,因为它除了JS打包功能外,还提供了文件解析(针对框架,还有额外的功能)。
如果不和框架一起使用,那么,可以使用它的模块化功能,就是,一个JS文件是一个模块,通过webpack打包,可以构建一个多模块的文件。
至于,JS文件压缩,混淆,文件hash等等的功能,webpack和gulp都可以做到。
gulp有个优点,就是支持文件上传(比如通过ftp),这样,可以实现打包+发布,一键完成。但是,webpack是做不到的。
总体来说,webpack就是项目打包;而gulp除了项目打包,还可以做到项目发布。
采用webpack的多入口模式就行