每次學(xué)新東西總感覺自己是不是變笨了，看了幾個(gè)博客，試著試著就跑不下去，無奈只有去看官方文檔。 webpack是基于node的。先安裝最新的node。
1.初始化
安裝node后，新建一個(gè)目錄，比如html5。cmd中切到當(dāng)前文件夾。
npm init -y
這個(gè)命令會(huì)創(chuàng)建一個(gè)默認(rèn)的package.json。它包含了項(xiàng)目的一些配置參數(shù)，通過它可以進(jìn)行初始安裝。詳細(xì)參數(shù)：https://docs.npmjs.com/files/package.json。
不要y參數(shù)的話，會(huì)在命令框中設(shè)置各項(xiàng)參數(shù)，但覺得沒啥必要。
2.安裝webpack
npm install webpack --save-dev
將webpack安裝到當(dāng)前目錄。雖然npm install webpack -g 可以講webpack安裝到全局，但是容易出現(xiàn)一些模塊找不到的錯(cuò)誤，所以最好還是安裝到當(dāng)前目錄下。
3.目錄結(jié)構(gòu)
webpack是一款模塊加載各種資源并打包的工具。所以先建一個(gè)如下的目錄結(jié)構(gòu)：
app包含的開發(fā)中的js文件，一個(gè)組件，一個(gè)入口。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 是輸出一個(gè)內(nèi)容為h1元素。export default 是ES6語法，表示指定默認(rèn)輸出。import的時(shí)候不用帶大括號(hào)。
index.js
import component from './component';document.body.appendChild(component());
index.js 的作用就是引用Component模塊，并在頁面上輸出一個(gè)h1元素。但完成這個(gè)還需要一個(gè)插件，因?yàn)槟壳拔覀冞€沒有index.html文件。
npm install html-webpack-plugin --save-dev
html-webpack-plugin的用來生成html，將其也安裝到開發(fā)目錄下面。
4.設(shè)置 webpack 配置文件
我們需要通過webpack.config.js文件告訴webpack如何開始。配置文件至少需要一個(gè)入口和一個(gè)輸出。多個(gè)頁面就需要多個(gè)入口。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', }), ],};第一次看到這個(gè)配置文件是有點(diǎn)懵，主要是exports，分三個(gè)部分，一個(gè)入口，一個(gè)輸出，一個(gè)插件。入口指向了app文件夾。默認(rèn)會(huì)把包含"index.js"的文件作為入口。輸出指定了build地址和一個(gè)文件名；[name]這兒表示占位符，可以看成webpack提供的一個(gè)變量。這個(gè)具體后面再看。而HtmlWebpackPlugin會(huì)生成一個(gè)默認(rèn)的html文件。
5.打包
有了以上準(zhǔn)備，直接輸入 webpack 就能運(yùn)行了。
這個(gè)輸出包含了Hash(每次打包值都不同),Version,Time(耗時(shí))。以及輸出的文件信息。這時(shí)打開build文件夾，發(fā)現(xiàn)多了一個(gè)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>
默認(rèn)引用了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)容比較多了。整體是一個(gè)匿名函數(shù)。
(function(module) {})([(function (){}), function() {}])app文件夾中的兩個(gè)js文件成了這兒的兩個(gè)模塊。函數(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__ 每加載一個(gè)模塊都會(huì)先去模塊緩存中找，沒有就新建一個(gè)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__ 返回的是這個(gè)模塊0的exports部分。而之前Component.js的默認(rèn)方法定義成了
__webpack_exports__["a"] = function () {var element = document.createElement('h1');element.innerHTML = 'Hello world';return element;}所以再模塊1的定義通過"a“來獲取這個(gè)方法：
這樣就完整了，但這里使用了__webpack_require__.i 將原值返回。
/******/ // identity function for calling harmony imports with the correct context/******/ __webpack_require__.i = function(value) { return value; };不太明白這個(gè)i函數(shù)有什么作用。這個(gè)注釋也不太明白，路過的大神希望可以指點(diǎn)下。
小結(jié)：
webpack通過一個(gè)立即執(zhí)行的匿名函數(shù)將各個(gè)開發(fā)模塊作為參數(shù)初始化，每個(gè)js文件(module)對應(yīng)一個(gè)編號(hào)，每個(gè)js中export的方法或者對象有各自指定的關(guān)鍵字。通過這種方式將所有的模塊和接口方法管理起來。然后先加載最后的一個(gè)模塊(應(yīng)該是引用別的模塊的模塊)，這樣進(jìn)而去觸發(fā)別的模塊的加載，使整個(gè)js運(yùn)行起來。到這基本了解了webpack的功能和部分原理，但略顯復(fù)雜，且沒有感受到有多大的好處。繼續(xù)探索。
demo：webpack.rar建議用最新的node安裝，不然build后的結(jié)果可能出錯(cuò)。
參考：
https://survivejs.com/webpack/developing/getting-started/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
