首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解webpack 入门与解析

Posted in Javascript onApril 09, 2018

每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。

1.初始化

安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。

npm init -y

这个命令会创建一个默认的package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：https://docs.npmjs.com/files/package.json。

不要y参数的话，会在命令框中设置各项参数，但觉得没啥必要。

2.安装webpack

npm install webpack --save-dev

将webpack安装到当前目录。虽然npm install webpack -g 可以讲webpack安装到全局，但是容易出现一些模块找不到的错误，所以最好还是安装到当前目录下。

3.目录结构

webpack是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构：

详解webpack 入门与解析

app包含的开发中的js文件，一个组件，一个入口。build中就是用来存放打包之后的文件的。webpack.config.js 顾名思义用来配置webpack的。package.json就不用说了。

component.js

export default function () {
 var element = document.createElement('h1');
 element.innerHTML = 'Hello world';
 return element;
}

component.js 是输出一个内容为h1元素。export default 是ES6语法，表示指定默认输出。import的时候不用带大括号。

index.js

import component from './component';
document.body.appendChild(component());

index.js 的作用就是引用Component模块，并在页面上输出一个h1元素。但完成这个还需要一个插件，因为目前我们还没有index.html文件。

npm install html-webpack-plugin --save-dev

html-webpack-plugin的用来生成html，将其也安装到开发目录下面。

4.设置 webpack 配置文件

我们需要通过webpack.config.js文件告诉webpack如何开始。配置文件至少需要一个入口和一个输出。多个页面就需要多个入口。node的path模块

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {
 app: path.join(__dirname, 'app'),
 build: path.join(__dirname, 'build'),
};

module.exports = {
 entry: {
 app: PATHS.app,
 },
 output: {
 path: PATHS.build,
 filename: '[name].js',
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'Webpack demo',
 }),
 ],
};

第一次看到这个配置文件是有点懵，主要是exports，分三个部分，一个入口，一个输出，一个插件。入口指向了app文件夹。默认会把包含"index.js"的文件作为入口。输出指定了build地址和一个文件名；[name]这儿表示占位符，可以看成webpack提供的一个变量。这个具体后面再看。而HtmlWebpackPlugin会生成一个默认的html文件。

5.打包

有了以上准备，直接输入 webpack 就能运行了。

详解webpack 入门与解析

这个输出包含了Hash(每次打包值都不同),Version,Time(耗时)。以及输出的文件信息。这时打开build文件夹，发现多了一个app.js和index.html文件，双击index.html：

详解webpack 入门与解析

也可以修改下package.json

{
 "name": "Html5",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build": "webpack"
 },
 "keywords": [],
 "author": "",
 
 "license": "ISC",
 "devDependencies": {
 "html-webpack-plugin": "^2.28.0",
 "webpack": "^2.2.1"
 }
}

指定build。在cmd中执行npm run build 得到同样的结果

详解webpack 入门与解析

出现helloword。再看下文件内容

index.html:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Webpack demo</title>
 </head>
 <body>
 <script type="text/javascript" src="app.js"></script></body>
</html>

默认引用了app.js。

6、解析

app.js

/******/ (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 = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony default export */ __webpack_exports__["a"] = function () {
 var element = document.createElement('h1');
 element.innerHTML = 'Hello world';
 return element;
};

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);

document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());

/***/ })
/******/ ]);

而app.js内容比较多了。整体是一个匿名函数。

(function(module) {
})([(function (){}), function() {}])

app文件夹中的两个js文件成了这儿的两个模块。函数最开始是从__webpack_require__开始

return __webpack_require__(__webpack_require__.s = 1);

这里指定从模块1执行(赋值语句的返回值为其值)。而模块1的调用是通过__webpack_require__的这句执行的。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

通过call调用模块的主要作用是为了把参数传过去。

(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);

document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());

/***/ })

__webpack_require__ 每加载一个模块都会先去模块缓存中找，没有就新建一个module对象：

var module = installedModules[moduleId] = {
   i: moduleId,
   l: false,
   exports: {}
  };

模块1中加载了模块0，

var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);

__WEBPACK_IMPORTED_MODULE_0__component__ 返回的是这个模块0的exports部分。而之前Component.js的默认方法定义成了

__webpack_exports__["a"] = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}

所以再模块1的定义通过"a“来获取这个方法：

document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());

这样就完整了，但这里使用了__webpack_require__.i 将原值返回。

/******/  // identity function for calling harmony imports with the correct context
/******/  __webpack_require__.i = function(value) { return value; };

不太明白这个i函数有什么作用。这个注释也不太明白，路过的大神希望可以指点下。

小结：

webpack通过一个立即执行的匿名函数将各个开发模块作为参数初始化，每个js文件(module)对应一个编号，每个js中export的方法或者对象有各自指定的关键字。通过这种方式将所有的模块和接口方法管理起来。然后先加载最后的一个模块(应该是引用别的模块的模块)，这样进而去触发别的模块的加载，使整个js运行起来。到这基本了解了webpack的功能和部分原理，但略显复杂，且没有感受到有多大的好处。继续探索。

demo：webpack_3water.rar建议用最新的node安装，不然build后的结果可能出错。

参考：

https://survivejs.com/webpack/developing/getting-started/

https://webpack.js.org/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解webpack 入门与解析

- Author -

stoneniqiu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
国外大牛IE版本检测！现在IE都到9了，IE检测代码
Jan 04 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 #Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 #Javascript
vue组件详解之使用slot分发内容
Apr 09 #Javascript
vue组件中使用props传递数据的实例详解
Apr 08 #Javascript
Vue入门之animate过渡动画效果
Apr 08 #Javascript
vue组件与复用详解
Apr 08 #Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
commit(1) procedure(1) harbor(1) 自定义函数(1) 内置函数(1) 分布式锁(3) pytz(1) Tablespace(1) GoFrame(3) Navicat(1)
You might like
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php经典算法集锦
2015/11/14 PHP
Maps Javascript
2007/01/22 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
2015/07/27 Javascript
每天一篇javascript学习小结（Boolean对象）
2015/11/12 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
实例解析jQuery工具函数
2016/12/01 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
JSON是什么？有哪些优点？JSON和XML的区别？
2019/04/29 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
浅谈Python数据类型之间的转换
2016/06/08 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python打开使用的方法
2019/09/30 Python
wxPython：python首选的GUI库实例分享
2019/10/05 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
领先的钻石和订婚戒指零售商：Diamonds-USA
2016/12/11 全球购物
英国在线照明超市：Castlegate Lights
2019/10/30 全球购物
小学门卫岗位职责
2013/12/17 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
2014最新实习证明模板
2014/10/02 职场文书
法定代表人免职证明
2015/06/24 职场文书