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

2024-05-06 16:43:50

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

Webpack簡介

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

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

模塊系統(tǒng)的演進<script>標簽

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

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

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

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

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

CommonJS規(guī)范

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

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

一個直觀的例子

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

AMD規(guī)范

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

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

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

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

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

一些用例

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

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

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

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

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

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

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

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

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

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

什么是 Webpack

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

Webpack 的特點

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

webpack基本使用

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

初始化

npm init 或 npm init -y

全局安裝

npm install webpack -g

局部安裝,在項目目錄下安裝

npm install webpack --save-dev

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

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

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

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

基本使用

首先創(chuàng)建一個靜態(tài)頁面 index.html 和一個 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 : 在頁面中打印出一句話document.write('It works.')

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

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

使用模塊

1.創(chuàng)建模塊module.js,在內(nèi)部導出內(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: [    //同時簡化 entry.js 中的 style.css 加載方式：require('./style.css')   {test: //.css$/, loader: 'style-loader!css-loader'}  ] }}

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

3.運行webpack

在命令行頁面直接輸入webpack

插件使用

1.插件安裝

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

2.配置文件的書寫

var webpack = require('webpack')module.exports = {  entry: './entry.js',  output: {    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      //同時簡化 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.運行webpack

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

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

webpack

--progress : 顯示編譯的進度

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

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

12.4.7.1. webpack-dev-server

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

1.安裝包

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

2.啟動服務(wù)

實時監(jiān)控頁面并自動刷新

webpack-dev-server --progress --colors

自動編譯

1.安裝插件

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

2.在配置文件中導入包

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

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

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

4.運行項目