极客观点
研发管理
HarmonyOS
我尝试着写了一个一句话的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!' // 这句是我原文件写的。
/***/ })
/******/ ]);
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代码，主要提供了模块的加载,模块的缓存，模块的执行等等一系列的方法。