【手把手帶你配 webpack】第一步, 作一個高級前端工程師

曾經, 領導說. 判斷一個前端是否是的水平怎麼樣只須要看他會不會配 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