【手把手带你配 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 的文章咯 :joy:

执行第一次打包

万里长城第一步, 肯定是要初始化项目结构啦! 本次项目的目录结构如下图. 代码地址

是 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 , 命令行中成功打印了 我是高级前端工程师~ 打包成功, 恭喜大家成功晋级 高级前端工程师

咦? 直接执行就可以, 那样我忙活半天岂不是脱了裤子放屁了...哈哈哈哈哈, 当然没有, 从下一步我们开始走向真正的高级前端工程师之路. 一起进阶 webpack