詳解webpack 入門與解析
每次學新東西總感覺自己是不是變笨了，看了幾個博客，試著試著就跑不下去，無奈只有去看官方文檔。 webpack是基于node的。先安裝最新的node。
1.初始化
安裝node后，新建一個目錄，比如html5。cmd中切到當前文件夾。
npm init -y
這個命令會創(chuàng)建一個默認的package.json。它包含了項目的一些配置參數(shù)，通過它可以進行初始安裝。詳細參數(shù)：https://docs.npmjs.com/files/package.json。
不要y參數(shù)的話，會在命令框中設(shè)置各項參數(shù)，但覺得沒啥必要。
2.安裝webpack
npm install webpack --save-dev
將webpack安裝到當前目錄。雖然npm install webpack -g 可以講webpack安裝到全局，但是容易出現(xiàn)一些模塊找不到的錯誤，所以最好還是安裝到當前目錄下。
3.目錄結(jié)構(gòu)
webpack是一款模塊加載各種資源并打包的工具。所以先建一個如下的目錄結(jié)構(gòu)：
app包含的開發(fā)中的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 是輸出一個內(nèi)容為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，將其也安裝到開發(fā)目錄下面。
4.設(shè)置 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文件夾，發(fā)現(xiàn)多了一個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中執(zhí)行npm run build 得到同樣的結(jié)果
出現(xiàn)helloword。再看下文件內(nèi)容
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內(nèi)容比較多了。整體是一個匿名函數(shù)。
(function(module) {
})([(function (){}), function() {}])
app文件夾中的兩個js文件成了這兒的兩個模塊。函數(shù)最開始是從__webpack_require__開始
return __webpack_require__(__webpack_require__.s = 1);
這里指定從模塊1執(zhí)行(賦值語句的返回值為其值)。而模塊1的調(diào)用是通過__webpack_require__的這句執(zhí)行的。
通過call調(diào)用模塊的主要作用是為了把參數(shù)傳過去。
(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“來獲取這個方法：
這樣就完整了，但這里使用了__webpack_require__.i 將原值返回。
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
不太明白這個i函數(shù)有什么作用。這個注釋也不太明白，路過的大神希望可以指點下。
小結(jié)：
webpack通過一個立即執(zhí)行的匿名函數(shù)將各個開發(fā)模塊作為參數(shù)初始化，每個js文件(module)對應(yīng)一個編號，每個js中export的方法或者對象有各自指定的關(guān)鍵字。通過這種方式將所有的模塊和接口方法管理起來。然后先加載最后的一個模塊(應(yīng)該是引用別的模塊的模塊)，這樣進而去觸發(fā)別的模塊的加載，使整個js運行起來。到這基本了解了webpack的功能和部分原理，但略顯復雜，且沒有感受到有多大的好處。繼續(xù)探索。
demo：webpack_jb51.rar建議用最新的node安裝，不然build后的結(jié)果可能出錯。
參考：
https://survivejs.com/webpack/developing/getting-started/
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript調(diào)試的多個必備小Tips，文章給出了詳細的介紹與示例代碼，有需要的朋友們可以參考借鑒，下面來一起學習學習學習吧。2017-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐s generator數(shù)據(jù)類型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了js關(guān)于命名空間的函數(shù),實例講述了namespace函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了如何結(jié)合HTML與JS實現(xiàn)3D倒計時爆炸特效,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-01-01
java與javascript之間json格式數(shù)據(jù)互轉(zhuǎn)介紹
對象轉(zhuǎn)為字符串：通過JSON.encode方法，這個是json.js里面的方法，引入到當前文件就可以了，下面整理的比較詳細一點，感興趣的朋友不要錯過2013-10-10
Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學習筆記
這篇文章主要介紹了Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學習筆記，感興趣的小伙伴們可以參考一下2016-07-07
獲取本機IP地址的實例(JavaScript / Node.js)
下面小編就為大家分享一篇使用JavaScript和Node.js獲取本機IP地址的實例，具有很好的參考價值，希望對大家有所幫助2017-11-11
關(guān)于原生js中bind函數(shù)的簡單實現(xiàn)
下面小編就為大家?guī)硪黄P(guān)于原生js中bind函數(shù)的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在本篇文章里小編給大家整理的是一篇關(guān)于js用正則表達式篩選年月日的實例方法，對此有興趣的朋友們可以學習下。2021-01-01
這篇文章主要介紹了JS實現(xiàn)仿雅虎首頁快捷登錄入口及導航模塊效果,涉及JavaScript響應(yīng)鼠標事件遍歷頁面元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09