在使用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// moduleexports.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文件，我们所需要的只是引入这个文件罢了。
webpack入门
原文地址：https://www.cnblogs.com/amiezhang/p/8296304.html