webpack入门

Posted 张啊咩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack入门相关的知识,希望对你有一定的参考价值。

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

  

以上是关于webpack入门的主要内容,如果未能解决你的问题,请参考以下文章

webpack4常用片段

webpack书本总结,入门webpack必备

webpack书本总结,入门webpack必备

webpack 入门2

webpack入门介绍

前端入门 —— 了解 webpack 和 各类插件的配置