- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) >
- webpack模塊化管理和打包工具的示例分析
小編給大家分享一下webpack模塊化管理和打包工具的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Webpack簡(jiǎn)介
webpack是當下最熱門(mén)的前端資源模塊化管理和打包工具。 它可以將許多松散的模塊按照依賴(lài)和規則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際
需要的時(shí)候再異步加載。通過(guò) loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
模塊系統的演進(jìn)<script>標簽
<script src="module1.js"></script> <script src="module2.js"></script> <script src="libraryA.js"></script> <script src="module3.js"></script>
這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對象中，
不同模塊的接口調用都是一個(gè)作用域中，一些復雜的框架，會(huì )使用命名空間的概念來(lái)組織這些模塊的接口，典型的例子如 YUI 庫。
這種原始的加載方式暴露了一些顯而易見(jiàn)的弊端：
全局作用域下容易造成變量沖突
文件只能按照 <script> 的書(shū)寫(xiě)順序進(jìn)行加載
開(kāi)發(fā)人員必須主觀(guān)解決模塊和代碼庫的依賴(lài)關(guān)系
在大型項目中各種資源難以管理，長(cháng)期積累的問(wèn)題導致代碼庫混亂不堪
CommonJS規范
CommonJS 是以在瀏覽器環(huán)境之外構建 JavaScript 生態(tài)系統為目標而產(chǎn)生的項目，比如在和桌面環(huán)境中。
CommonJS 規范是為了解決 JavaScript 的作用域問(wèn)題而定義的模塊形式，可以使每個(gè)模塊它自身的命名空間中執行。該規范的主要內容是，模塊必須通過(guò) module.exports 導出對外的變量 或接口，通過(guò) require() 來(lái)導入其他模塊的輸出到當前模塊作用域中。
一個(gè)直觀(guān)的例子
// moduleA.js
module.exports = function( value ){
return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);AMD規范
AMD（異步模塊定義）是為瀏覽器環(huán)境設計的，因為 CommonJS 模塊系統是同步加載的，當前瀏覽器環(huán)境還沒(méi)有準備好同步加載模塊的條件。
模塊通過(guò) define 函數定義在閉包中，格式如下：
define(id?: String, dependencies?: String[], factory: Function|Object);
id 是模塊的名字，它是可選的參數。
factory 是最后一個(gè)參數，它包裹了模塊的具體實(shí)現，它是一個(gè)函數或者對象。如果是函數，那么它的返回值就是模塊的輸出接口或值。
一些用例
定義一個(gè)名為 myModule 的模塊，它依賴(lài) jQuery 模塊：
define('myModule', ['jquery'], function($) {
// $ 是 jquery 模塊的輸出
$('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});注意 ：在 webpack 中，模塊名只有局部作用域，在 Require.js 中模塊名是全局作用域，可以在全局引用。
定義一個(gè)沒(méi)有 id 值的匿名模塊，通常作為應用的啟動(dòng)函數：
define(['jquery'], function($) {
$('body').text('hello world');
});AMD 也采用require()語(yǔ)句加載模塊，但不同于CommonJS,他要求兩個(gè)參數
第一個(gè)參數[module]，是一個(gè)數組，里面的成員就是要加載的模塊； 第二個(gè)參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫(xiě)成AMD形式，就是下面這樣：
math.add()與math模塊加載不是同步的，瀏覽器不會(huì )發(fā)生假死。所以很顯然，AMD比較適合瀏覽器環(huán)境
目前，主要有兩個(gè)Javascript庫實(shí)現了AMD規范： require.js 和 curl.js
require(['math'], function (math) {
math.add(2, 3);
});什么是 Webpack
Webpack 是一個(gè)模塊打包器。它將根據模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規則生成對應的靜態(tài)資源。
Webpack 的特點(diǎn)
代碼拆分
Loader
智能解析
插件系統
快速運行
webpack基本使用
創(chuàng )建項目根目錄
初始化
npm init 或 npm init -y
全局安裝
npm install webpack -g
局部安裝,在項目目錄下安裝
npm install webpack --save-dev
--save: 將安裝的包的信息保存在package中
--dev:開(kāi)發(fā)版本,只是項目構建的時(shí)候使用,項目構建完成后并不依賴(lài)的文件
如果使用web開(kāi)發(fā)工具,單獨安裝
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è)面中打印出一句話(huà)
document.write('It works.')然后編譯 entry.js并打包到 bundle.js文件中
// 使用npm命令 webpack entry.js bundle.js
使用模塊
1.創(chuàng )建模塊module.js,在內部導出內容
module.exports = 'It works from module.js'
2.在entry.js中使用自定義的模塊
//entry.js
document.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.css
body { background: yellow; }3.修改 entry.js：
require("!style-loader!css-loader!./style.css") // 載入 style.css
document.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.運行webpack
在命令行頁(yè)面直接輸入webpack
插件使用
1.插件安裝
//添加注釋的插件 npm install --save-devbannerplugin
2.配置文件的書(shū)寫(xiě)
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.運行webpack
// 可以在bundle.js的頭部看到注釋信息 /*! This file is created by zhaoda */
開(kāi)發(fā)環(huán)境
webpack
--progress : 顯示編譯的進(jìn)度
--colors ： 帶顏色顯示，美化輸出
--watch?。骸￠_(kāi)啟監視器，不用每次變化后都手動(dòng)編譯
12.4.7.1. webpack-dev-server
開(kāi)啟服務(wù),以監聽(tīng)模式自動(dòng)運行
1.安裝包
npm install webpack-dev-server -g --save-dev
2.啟動(dòng)服務(wù)
實(shí)時(shí)監控頁(yè)面并自動(dòng)刷新
webpack-dev-server --progress --colors
自動(dòng)編譯
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'),
//自動(dòng)編譯
new htmlWebpackPlugin({
title: "index",
filename: 'index.html', //在內存中生成的網(wǎng)頁(yè)的名稱(chēng)
template: './index.html' //生成網(wǎng)頁(yè)名稱(chēng)的依據
})
]4.運行項目
webpack--save-dev
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系QQ:712375056 進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
