曾經, 領導說. 判斷一個前端是不是的水平怎麼樣只需要看他會不會配 webpack 就可以了. 然後…
一頓操作猛如虎, 然而 “有的時候, 不能一場排位就定段呀” —– 我 去年 買了個
打包工具的前世今生
webpack 顧名思義, web 應用的 pack(打包) 工具. 舉個例子, 假如你出門旅行需要攜帶各種各樣的隨身物品, 怎麼辦咧? 一個揹包搞定. 所有的隨身物品打包到揹包裡, 管他充電器還是充電寶, 杜蕾斯還是岡本全都一步到位…
早期的 web 應用相對單調, 網頁一般就是三大件(html css js)一把梭的擼, 打包的概念無非就是圖片壓一壓, 各種 js 檔案拼接成一個檔案來解決單個頁面資源載入的數量過多影響體驗的問題, 當時優秀的打包工具有 grunt, gulp 等. 但隨著 react, vue 等優秀 web 框架的出現把元件化開發的思維帶入了前端領域, web 應用中的依賴也趨向於多元化, 圖片, 字型, js 轉碼, 樣式預處理等等需求應運而生. 單純的檔案拼接略顯乏力了.
這是時候, 你需要一款專業的工具啦, 那就是 webpack
環境搭建
光說不練假把式, 首先我們安裝 nodejs, 如果可以的話推薦使用最新版本. 具體的安裝方式請參照這篇文章說的簡直不要太詳細. eslint 建議也配置以下哈. eslint + vscode 的程式碼自修復能力爽到飛起.
本地(專案)安裝 webpack
專案初始化完成後, 直接命令列執行 npm i webpack@3.10.0 -D 安裝 webpack. 細心的同學可能發現了webpack 並不是當今最高大上的 webpack4.X 版本, 這個原因呢很簡單. 因為 4.x 版本的 webpack 我
當然了, 我也相信大家理解 3.x 的 webpack 以後 4.x 的也會分分鐘搞定. 要是搞不定咋弄咧, 來找我補 4.x 的文章咯 ?
執行第一次打包
萬里長城第一步, 肯定是要初始化專案結構啦! 本次專案的目錄結構如下圖. 程式碼地址
其中, .eslintignore .eslintrc.js 為 eslint 配置檔案, .gitignore 為 git 配置檔案 package.json package-lock.json 是 npm 的配置檔案
首先, 我們建立待處理的 js 檔案 index.js 並且寫入內容
console.log('我是高階前端工程師~')複製程式碼其次, 在專案的根目錄下建立 webpack 配置檔案, 檔名為 webpack.config.js 並寫入內容
module.exports = {
// 這裡是打包的入口檔案相對路徑 entry: './index.js', output: {
// 打包結果存放的位置, 必須用絕對路徑 path: '/Users/quanquanluo/workSpace/quanquan/blog-repo/webpack-show/dist', // 打包結果檔名稱 filename: 'bundle.js',
},
};
複製程式碼到現在, 隨身物品和揹包都準備好了, 我們開始執行打包操作. 命令列執行 ./node_modules/.bin/webpack (webpack 回自動尋找專案目錄下的配置檔案), 此時在專案的根目錄中新增了 dist 目錄, dist 目錄下建立了 bundle.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;
/******//******/ // 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 = 0);
/******/
})/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports) {console.log('我是高階前端工程師~');
/***/
})/******/ ]);
複製程式碼天書有麼有?
稍微整理了一下, 變成了下面的樣子
(function(modules) {
function __webpack_require__(moduleId) {
modules[moduleId]();
} return __webpack_require__(0);
})([ (function() {
console.log('我是高階前端工程師~');
})]);
複製程式碼清秀多了. 打包的過程其實就是把模組用一個匿名自執行函式包裹了一下. so esay
初次打包的程式碼地址. 當然啦, 作為一個清秀的前端工程師, 肯定不能容忍 /Users/quanquanluo/workSpace/quanquan/blog-repo/webpack-show/dist 這麼長的程式碼, 稍加改造 webpack.config.js 如下
// 引用 node 原生 path 模組處理絕對路徑const path = require('path');
module.exports = {
// 這裡是打包的入口檔案相對路徑 entry: './index.js', output: {
// 打包結果存放的位置, 必須用絕對路勁 path: path.resolve(__dirname, 'dist'), // 打包結果檔名稱 filename: 'bundle.js',
},
};
複製程式碼調整後程式碼地址, 看上去舒服多了…
驗證打包後的檔案
最後, 我們執行 node dist/bundle.js, 命令列中成功列印了 我是高階前端工程師~ 打包成功, 恭喜大家成功晉級 高階前端工程師
但是, 專案目錄下直接執行 node index.js
咦? 直接執行就可以, 那樣我忙活半天豈不是脫了褲子放屁了…哈哈哈哈哈, 當然沒有, 從下一步我們開始走向真正的高階前端工程師之路. 一起進階 webpack