webpack入门与解析(一)

来源:互联网 发布:淘宝网站制作 编辑:程序博客网 时间:2024/06/11 04:49
每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 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是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构:
 
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 就能运行了。

 

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

  
也可以修改下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 得到同样的结果

 出现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 */])());/***/ })/******/ ]);
View Code

而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的功能和部分原理,但略显复杂,且没有感受到有多大的好处。继续探索。

 

0 0
原创粉丝点击