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

2024-05-06 16:43:50

字體：大中小

來源：轉載

供稿：網友

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

Webpack簡介

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

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

模塊系統的演進<script>標簽

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

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

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

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

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

CommonJS規范

CommonJS 是以在瀏覽器環境之外構建 JavaScript 生態系統為目標而產生的項目，比如在服務器和桌面環境中。

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

一個直觀的例子

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

AMD規范

AMD（異步模塊定義）是為瀏覽器環境設計的，因為 CommonJS 模塊系統是同步加載的，當前瀏覽器環境還沒有準備好同步加載模塊的條件。

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

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

id 是模塊的名字，它是可選的參數。

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

一些用例

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

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

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

定義一個沒有 id 值的匿名模塊，通常作為應用的啟動函數：

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

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

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

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

目前，主要有兩個Javascript庫實現了AMD規范： require.js 和 curl.js

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

什么是 Webpack

Webpack 是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 的特點

代碼拆分
Loader
智能解析
插件系統
快速運行

webpack基本使用

創建項目根目錄

初始化

npm init 或 npm init -y

全局安裝

npm install webpack -g

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

npm install webpack --save-dev

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

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

如果使用web開發工具,單獨安裝

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

基本使用

首先創建一個靜態頁面 index.html 和一個 JS 入口文件 entry.js：

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

創建entry.js

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

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

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

使用模塊

1.創建模塊module.js,在內部導出內容

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.創建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'))

創建配置文件webpack.config.js

1.創建文件

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 */

開發環境

webpack

--progress : 顯示編譯的進度

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

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

12.4.7.1. webpack-dev-server

開啟服務,以監聽模式自動運行

1.安裝包

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

2.啟動服務

實時監控頁面并自動刷新

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', //在內存中生成的網頁的名稱      template: './index.html' //生成網頁名稱的依據    })  ]

4.運行項目