【手把手带你配 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