詳解webpack模塊化管理和打包工具

2019-11-19 13:59:15

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

本篇文章主要介紹了詳解webpack模塊化管理和打包工具，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Webpack簡(jiǎn)介

webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際

需要的時(shí)候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

模塊系統(tǒng)的演進(jìn)<script>標(biāo)簽

<script src="module1.js"></script><script src="module2.js"></script><script src="libraryA.js"></script><script src="module3.js"></script>

這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對(duì)象中，

不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來組織這些模塊的接口，典型的例子如 YUI 庫(kù)。

這種原始的加載方式暴露了一些顯而易見的弊端：

全局作用域下容易造成變量沖突
文件只能按照 <script> 的書寫順序進(jìn)行加載
開發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系
在大型項(xiàng)目中各種資源難以管理，長(zhǎng)期積累的問題導(dǎo)致代碼庫(kù)混亂不堪

CommonJS規(guī)范

CommonJS 是以在瀏覽器環(huán)境之外構(gòu)建 JavaScript 生態(tài)系統(tǒng)為目標(biāo)而產(chǎn)生的項(xiàng)目，比如在服務(wù)器和桌面環(huán)境中。

CommonJS 規(guī)范是為了解決 JavaScript 的作用域問題而定義的模塊形式，可以使每個(gè)模塊它自身的命名空間中執(zhí)行。該規(guī)范的主要內(nèi)容是，模塊必須通過 module.exports 導(dǎo)出對(duì)外的變量或接口，通過 require() 來導(dǎo)入其他模塊的輸出到當(dāng)前模塊作用域中。

一個(gè)直觀的例子

// moduleA.jsmodule.exports = function( value ){  return value * 2;}// moduleB.jsvar multiplyBy2 = require('./moduleA');var result = multiplyBy2(4);

AMD規(guī)范

AMD（異步模塊定義）是為瀏覽器環(huán)境設(shè)計(jì)的，因?yàn)?CommonJS 模塊系統(tǒng)是同步加載的，當(dāng)前瀏覽器環(huán)境還沒有準(zhǔn)備好同步加載模塊的條件。

模塊通過 define 函數(shù)定義在閉包中，格式如下：

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模塊的名字，它是可選的參數(shù)。

factory 是最后一個(gè)參數(shù)，它包裹了模塊的具體實(shí)現(xiàn)，它是一個(gè)函數(shù)或者對(duì)象。如果是函數(shù)，那么它的返回值就是模塊的輸出接口或值。

一些用例

定義一個(gè)名為 myModule 的模塊，它依賴 jQuery 模塊：

define('myModule', ['jquery'], function($) {  // $ 是 jquery 模塊的輸出  $('body').text('hello world');}); // 使用 require(['myModule'], function(myModule) {});

注意：在 webpack 中，模塊名只有局部作用域，在 Require.js 中模塊名是全局作用域，可以在全局引用。

定義一個(gè)沒有 id 值的匿名模塊，通常作為應(yīng)用的啟動(dòng)函數(shù)：

define(['jquery'], function($) {  $('body').text('hello world');});

AMD 也采用require()語(yǔ)句加載模塊，但不同于CommonJS,他要求兩個(gè)參數(shù)

第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊；第二個(gè)參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫成AMD形式，就是下面這樣：

math.add()與math模塊加載不是同步的，瀏覽器不會(huì)發(fā)生假死。所以很顯然，AMD比較適合瀏覽器環(huán)境

目前，主要有兩個(gè)Javascript庫(kù)實(shí)現(xiàn)了AMD規(guī)范： require.js 和 curl.js

　require(['math'], function (math) {　　　　math.add(2, 3);　　});

什么是 Webpack

Webpack 是一個(gè)模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。

Webpack 的特點(diǎn)

代碼拆分
Loader
智能解析
插件系統(tǒng)
快速運(yùn)行

webpack基本使用

創(chuàng)建項(xiàng)目根目錄

初始化

npm init 或 npm init -y

全局安裝

npm install webpack -g

局部安裝,在項(xiàng)目目錄下安裝

npm install webpack --save-dev

--save: 將安裝的包的信息保存在package中

--dev:開發(fā)版本,只是項(xiàng)目構(gòu)建的時(shí)候使用,項(xiàng)目構(gòu)建完成后并不依賴的文件

如果使用web開發(fā)工具,單獨(dú)安裝

npm install webpack-dev-server --save-dev

基本使用

首先創(chuàng)建一個(gè)靜態(tài)頁(yè)面 index.html 和一個(gè) JS 入口文件 entry.js：

<!-- index.html --><html><head><meta charset="utf-8"></head><body><script src="bundle.js"></script></body></html>

創(chuàng)建entry.js

// entry.js : 在頁(yè)面中打印出一句話document.write('It works.')

然后編譯 entry.js并打包到 bundle.js文件中

// 使用npm命令 webpack entry.js bundle.js

使用模塊

1.創(chuàng)建模塊module.js,在內(nèi)部導(dǎo)出內(nèi)容

module.exports = 'It works from module.js'

2.在entry.js中使用自定義的模塊

//entry.jsdocument.write('It works.')document.write(require('./module.js')) // 添加模塊

加載css模塊

1.安裝css-loader

npm install css-loader style-loader --save-dev

2.創(chuàng)建css文件

//style.cssbody { background: yellow; }

3.修改 entry.js：

require("!style-loader!css-loader!./style.css") // 載入 style.cssdocument.write('It works.')document.write(require('./module.js'))

創(chuàng)建配置文件webpack.config.js

1.創(chuàng)建文件

var webpack = require('webpack')module.exports = { entry: './entry.js', output: {  path: __dirname,  filename: 'bundle.js' }, module: {  loaders: [    //同時(shí)簡(jiǎn)化 entry.js 中的 style.css 加載方式：require('./style.css')   {test: //.css$/, loader: 'style-loader!css-loader'}  ] }}

2.修改 entry.js 中的 style.css 加載方式：require('./style.css')

3.運(yùn)行webpack

在命令行頁(yè)面直接輸入webpack

插件使用

1.插件安裝

//添加注釋的插件npm install --save-devbannerplugin

2.配置文件的書寫

var webpack = require('webpack')module.exports = {  entry: './entry.js',  output: {    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      //同時(shí)簡(jiǎn)化 entry.js 中的 style.css 加載方式：require('./style.css')      {        test: //.css$/,        loader: 'style-loader!css-loader'      }    ],    plugins: [      //添加注釋的插件      new webpack.BannerPlugin('This file is created by zhaoda')    ]  }}

3.運(yùn)行webpack

// 可以在bundle.js的頭部看到注釋信息/*! This file is created by zhaoda */

開發(fā)環(huán)境

webpack

--progress : 顯示編譯的進(jìn)度

--colors ：　帶顏色顯示，美化輸出

--watch　：　開啟監(jiān)視器，不用每次變化后都手動(dòng)編譯

12.4.7.1. webpack-dev-server

開啟服務(wù),以監(jiān)聽模式自動(dòng)運(yùn)行

1.安裝包

npm install webpack-dev-server -g --save-dev

2.啟動(dòng)服務(wù)

實(shí)時(shí)監(jiān)控頁(yè)面并自動(dòng)刷新

webpack-dev-server --progress --colors

自動(dòng)編譯

1.安裝插件

npm install --save-dev html-webpack-plugin

2.在配置文件中導(dǎo)入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [    //添加注釋的插件    new webpack.BannerPlugin('This file is created by zhaoda'),    //自動(dòng)編譯    new htmlWebpackPlugin({      title: "index",      filename: 'index.html', //在內(nèi)存中生成的網(wǎng)頁(yè)的名稱      template: './index.html' //生成網(wǎng)頁(yè)名稱的依據(jù)    })  ]

4.運(yùn)行項(xiàng)目