說說前端工程化利器 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
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。