吉林11选5官方:详解webpack 入门与解析

转载  2018-04-09   作者:stoneniqiu   我要评论

这篇文章主要介绍了详解webpack 入门与解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 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???/a>

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 */])());

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

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

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

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

return __webpack_require__(__webpack_require__.s = 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: {}
  };

???中加载了???,

var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);

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

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

所以再???的定义通过"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_jb51.rar建议用最新的node安装,不然build后的结果可能出错。

参考:

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

https://webpack.js.org/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript去除字符串左右两端的空格

    javascript去除字符串左右两端的空格

    这篇文章主要介绍了javascript去除字符串左右两端的空格,需要的朋友可以参考下
    2015-02-02
  • js简单时间比较的方法

    js简单时间比较的方法

    这篇文章主要介绍了js简单时间比较的方法,通过2个自定义函数实现针对时间与日期的比较功能,涉及javascript日期及时间换算与比较操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈JS中的bind方法与函数柯里化

    浅谈JS中的bind方法与函数柯里化

    下面小编就为大家带来一篇浅谈JS中的bind方法与函数柯里化。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 浅谈js的异步执行

    浅谈js的异步执行

    下面小编就为大家带来一篇浅谈js的异步执行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript更改class和id的方法

    JavaScript更改class和id的方法

    JavaScript允许你更改元素的class或id。当你更改之后,浏览器会自动更新元素的样式。
    2008-10-10
  • ReactNative 之FlatList使用及踩坑封装总结

    ReactNative 之FlatList使用及踩坑封装总结

    本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • js的正则test,match,exec详细解析

    js的正则test,match,exec详细解析

    本篇文章主要是对js的正则test,match,exec进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 带有定位当前位置的百度地图前端web api实例代码

    吉林11选5一定牛网 www.nocios.com 带有定位当前位置的百度地图前端web api实例代码

    这篇文章主要介绍了带有定位当前位置的百度地图前端web api实例代码 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript正则表达式实例详解

    JavaScript正则表达式实例详解

    在编写处理字符串的程序或网页时,经?;嵊胁檎曳夏承└丛庸嬖虻淖址男枰?。正则表达式就是用于描述这些规则的工具?;痪浠八?,正则表达式就是记录文本规则的代码。
    2016-10-10

最新评论

172| 342| 243| 282| 659| 543| 607| 787| 202| 352|