webpack入门

Posted 2020-10-21 张啊咩

在使用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文件，我们所需要的只是引入这个文件罢了。