在使用webpack之前，我曾经使用过gulp(也稍微写过一下博文),虽然来说都是打包工具，但是当公司一下把一个webpack模板扔过来的时候，我一下子就懵了，不知所措，只能慢慢的来重新学习webpack。
在以前使用gulp的时候，一般有一个套路如下，
gulp.task(‘name...‘, function() { gulp.src(‘路径/***通配符.后缀‘).pipe(各种gulp插件) })
然后各种task运行都有自己的任务：编译scss、压缩js、打包js、压缩图片....一项项的都要自己写，最后完成打包。
到了webpack就完全没有了这个套路，甚至一开始，我没有写任何配置和任务，webpack都可以正常的运行。
最简单的一个例子：
直接写一个hello.js:
//hello.js function hello(){ alert(‘hello!!‘); }
然后直接运行：
webpack hello.js hello.bundle.js
就直接生成了一个hello.bundle.js:
/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId){ /******/ //...............一大堆webpack内部需要用的函数，例如require模块化实现的代码 /******/ } /******/ }) /************************************************************************/ //这是我们的代码，因为只有一个模块，被编写为第0个 /******/ ([ /* 0 */ /***/ (function(module, exports) { //webpack不能识别我们的代码是否对错，只能帮我们这样分好模块 //如果这里是es6代码，webpack默认是不帮我们babel到es5的 function hello(){ alert(‘hello!!‘); } /***/ }) /******/ ]);
稍微复杂点的例子：
hello.js:
import a from ‘./world‘; require(‘style-loader!css-loader!./style.css‘); function hello(){ alert(‘hello!!‘); } hello(); alert(a())
world.js
function world(){ return ‘world‘; } export default world;
style.css:
html,body{ margin:0; padding:0; } body{ background: red; }
运行：
webpack hello.js hello.bundle.js
生成 hello.bundle.js:
//省略。。。 /************************************************************************/ //我们的代码 /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__world__ = __webpack_require__(1); __webpack_require__(2); function hello(){ alert(‘hello!!‘); } hello(); alert(Object(__WEBPACK_IMPORTED_MODULE_0__world__["a" /* default */])()) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; function world(){ return ‘world‘; } /* harmony default export */ __webpack_exports__["a"] = (world); //省略一些style-loader的代码 /***/ }), /* 3 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(4)(false); // imports // module exports.push([module.i, "html,body{\n margin:0;\n padding:0;\n}\nbody{\n background: red;\n}\n", ""]);
最后，我们只需要在html里面引入这个打包好的hello.bundle.js就可以了。js代码会正常运行，css也会自动插入html中。
相信到了这里大家清楚webpack究竟是干什么的了，就是将一堆乱七八糟的东西都打包成一个js文件，我们所需要的只是引入这个文件罢了。
