首页
所有分类
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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
微信小程序实现下拉刷新动画
Jun 21 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
Sunmao(1) 滚动条(1) 声卡驱动(1) Debian(1) 鸿蒙3.0(1) 鸿蒙(2) win7(2) RustDesk(1) 蓝屏(1) 输入法(2)
You might like
PHP 组件化编程技巧
2009/06/06 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
laravel model 两表联查示例
2019/10/24 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
小结Python的反射机制
2020/09/28 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
编写python代码实现简单抽奖器
2020/10/20 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
德国柯吉澳趣味家居：Koziol
2017/08/24 全球购物
ebookers英国：隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
纽约复古灵感的现代珠宝品牌：Lulu Frost
2018/03/03 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
工作鉴定评语
2014/05/04 职场文书
党员带头倡议书
2015/04/29 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL