说说前端工程化利器 webpack

时间 2019-11-30

标签说说前端工程利器 webpack 繁體版

原文原文链接

1 工程化

前端自动化或者半自动化工程，须要实现如下功能：css

合并和压缩 Javascript、CSS 代码。
CSS 预处理： Less ， Sass, Stylus 的编译。
生成雪碧图（CSS Sprite）。
ES6 转换为 ES5 语法。
模块化。

名称解析：html

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。前端

Sass 是一个将脚本解析成 CSS 的脚本语言，即 SassScript。webpack

stylus，是 CSS 的预处理框架。web

CSS Sprites 在国内不少人叫 css 精灵，是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。ajax

2 webpack 简介

本质上， webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。下图是 webpack 的模块化示意图：后端

左边是咱们所写的各类前端格式文件，这些文件会经过在 webpack 中定义的特定加载器（ Loader ）编译以后，统一辈子成右边的静态资源文件。bash

在 Webpack 中，图片、CSS 文件以及字体，都被称为模块，这些模块彼此存在依赖关系， webpack 会处理这些模块之间的依赖关系，而后打包。app

举个例子：在常规的 html 中，若是咱们须要引入一个 css 文件，一般在 html 页面的 <head> 部分使用 <link> 将其引入：框架

<link rel="stylesheet" type="text/css" href="style.css">
复制代码

而在 webpack 中，咱们能够直接在 .js 文件中导入 CSS：

import 'style.css';//ES 2015 语法
复制代码

webpack 在打包时， style.css 会被打包进一个 js 文件，而后经过动态建立 <style> 的形式来加载 css 样式。还能够进一步配置 webpack ，让它在打包编译时把全部的 css 都提取出来，生成一个 css 文件。

3 webpack 适用场景

webpack 适用于单页 Web 应用（ single page web application ， SPA ）。SPA 指的是：只有一张 Web 页面，并会在用户与应用程序交互时动态更新该页面的 Web 应用程序。

SPA 有这些特色：

特色	说明
速度	更好的用户体验，让用户在 web app 中感觉到 native app 的速度和流畅。
MVVM	经典 MVVM 开发模式，先后端各负其责。
ajax	重前端，业务逻辑所有在本地操做，数据都须要经过 AJAX 同步、提交。
路由	在 URL 中采用 # 号来做为当前视图的地址 , 改变 # 号后的参数，页面并不会重载。

4 ES6 导入、导出语法

SPA 中的一个模块就是一个 JS 文件，它拥有独立的做用域，而且内部定义的变量，外部是没法获取的。因此咱们必须导出一个模块，而后再导入到须要调用它的其它模块中，这样才能正常使用。而这些操做，就会用到 ES6 导入、导出语法。

4.1 export （导出）

export 用于导出模块，好比咱们想导出一个乘法函数：

export function multiple(a, b) {
    return a * b;
}
复制代码

4.2 import （导入）

export 用于导入模块，好比咱们想在 main.js 中导入刚才的那个乘法函数：

import {multiple} from "./multiple";
console.log(multiple(2,3));//6
复制代码