Webpack簡(jiǎn)介
Webpack是一款模組打包工具。它為不同的依賴(lài)創(chuàng)建模組，將其整體打包成可管理的輸出檔案。這一點(diǎn)對(duì)於單一頁(yè)面應(yīng)用（現(xiàn)今Web應(yīng)用的事實(shí)標(biāo)準(zhǔn)）來(lái)說(shuō)特別有用。
假設(shè)我們有一個(gè)可以執(zhí)行兩個(gè)簡(jiǎn)單數(shù)學(xué)任務(wù)（加法和乘法）的應(yīng)用程序，為了方便維護(hù)，我們決定切分這些函數(shù)到不同的文件中去。
index.html
<html>
<head>
<script src="src/sum.js"></script>
<script src="src/multiply.js"></script>
<script src="src/index.js"></script>
</head>
</html>index.js
var totalMultiply = multiply(5, 3); var totalSum = sum(5, 3); console.log('Product of 5 and 3 = ' + totalMultiply); console.log('Sum of 5 and 3 = ' + totalSum);
multiply.js
#var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};sum.js
var sum = function (a, b) {
return a + b;
};這個(gè)應(yīng)用程式的輸出應(yīng)該是：
Product of 5 and 3 = 15 Sum of 5 and 3 = 8
Webpack是如何幫助我們的？
我們不能只是使用工具，而不知道這些工具能幫助我們做什麼。那麼，Webpack幫我們做了什麼呢？
用模組來(lái)拯救依賴(lài)
在上面的程式碼中，我們可以看到，multiply.js與index.js皆依賴(lài)sum.js。因此，如果index.html導(dǎo)入依賴(lài)時(shí)使用了錯(cuò)誤的順序，那麼我們的應(yīng)用程式就無(wú)法運(yùn)作。舉個(gè)例子，如果index.js先被導(dǎo)入，或sum.js在multiply.js之後被導(dǎo)入，都會(huì)得到錯(cuò)誤。
基於上面的例子，讓我們想像一下，一個(gè)真實(shí)的Web應(yīng)用往往可能會(huì)包含多達(dá)幾十個(gè)依賴(lài)項(xiàng)，這些依賴(lài)項(xiàng)之間還可能存在依賴(lài)關(guān)係，維護(hù)這些依賴(lài)項(xiàng)之間的順序想想就讓人窒息。這裡還可能存在變數(shù)被其它依賴(lài)覆蓋的風(fēng)險(xiǎn)，而這將會(huì)導(dǎo)致難以發(fā)現(xiàn)的BUG。
為了解決這個(gè)痛點(diǎn)，Webpack會(huì)將依賴(lài)轉(zhuǎn)換為作用域更小的模組，從而避免變數(shù)被覆蓋。依賴(lài)轉(zhuǎn)換為模組帶來(lái)的額外好處是，Webpack可以為我們管理這些依賴(lài)。具體做法是，Webpack會(huì)在需要時(shí)，把依賴(lài)模組引入進(jìn)來(lái)，並且匹配對(duì)應(yīng)的作用域。
透過(guò)打包來(lái)減少HTTP請(qǐng)求次數(shù)
#我們還是回看一下index.html，這個(gè)檔案中我們需要下載三個(gè)獨(dú)立的檔案。當(dāng)然這裡文件比較少還能夠應(yīng)付，但還是之前提到的問(wèn)題，真實(shí)的Web應(yīng)用中，依賴(lài)項(xiàng)可能會(huì)很多，而這將會(huì)導(dǎo)致用戶(hù)不得不等待所有依賴(lài)項(xiàng)挨個(gè)下載完成後，主應(yīng)用程序才能運(yùn)行。
而這就引出了Webpack的另一個(gè)特性－打包。 Webpack可以將所有的依賴(lài)物打包成一個(gè)文件，而這就意味著，使用者只需要下載一個(gè)依賴(lài)項(xiàng)，主應(yīng)用程式就可以運(yùn)作。
綜上所述，Webpack的主要特性就是打包和模組化。透過(guò)使用外掛程式和載入器，我們可以擴(kuò)充Webpack的這兩大功能。
讓依賴(lài)可用，並組合它們
我們將使用CommonJS模組語(yǔ)法，作為初始設(shè)定。當(dāng)然，這裡也有諸如AMD，ES2015等其它選擇，但這裡我們將先使用CommonJS，稍後遷移到ES2015。
CommonJS將模組匯出，使得其它程式碼可以使用導(dǎo)出模組中的函數(shù)或變數(shù)。我們可以透過(guò)require將導(dǎo)出模組中的值讀出來(lái)。
index.html
<html>
<head>
<script src="./dist/bundle.js""></script>
</head>
</html>index.js
var multiply = require('./multiply');
var sum = require('./sum');
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);multiply.js
#var sum = require('./sum');
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;sum.js
var sum = function (a, b) {
return a + b;
};
module.exports = sum;觀察上面的程式碼，不難發(fā)現(xiàn)，為了讓函數(shù)sum與函數(shù)multiply能夠被使用，我們?cè)?em>sum.js與multiply.js腳本中，導(dǎo)出了這兩個(gè)函數(shù)。這裡有個(gè)細(xì)節(jié)，不知道大家是否注意到了，在index.html中我們現(xiàn)在只需要導(dǎo)入一個(gè)bundle.js檔。
這可幫大忙了！我們現(xiàn)在不再需要關(guān)注依賴(lài)的順序，可以暴露我們想暴露的內(nèi)容，並使得其它內(nèi)容仍然保持私有。同時(shí)，我們現(xiàn)在只需要導(dǎo)入一個(gè)文件，而不是三個(gè)，這有助於提高應(yīng)用程式的載入速度。
Webpack的初始設(shè)定
為了實(shí)現(xiàn)我們上面要達(dá)到的效果，我們需要對(duì)Webpack做一些初步的設(shè)定。
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
}
}這裡我們實(shí)作了一個(gè)最簡(jiǎn)單的設(shè)定。我們至少要告訴Webpack，我們應(yīng)用的入口在哪，輸出結(jié)果應(yīng)該是什麼。讓我們來(lái)詳細(xì)看看每個(gè)屬性所代表的意義。
entry: 這個(gè)屬性表示應(yīng)用的入口。入口就意味著，這是我們加載程序和程序邏輯的起點(diǎn)。Webpack將從這個(gè)入口開(kāi)始，遍歷整棵依賴(lài)樹(shù)。根據(jù)遍歷結(jié)果建立一個(gè)依賴(lài)間關(guān)系圖，并創(chuàng)建需要的模塊。output.path: 這個(gè)屬性表示存放打包結(jié)果的絕對(duì)路徑。這里為了方便使用，我們采用了Node.js自帶的函數(shù)path，這個(gè)函數(shù)能夠根據(jù)我們程序所處的位置，動(dòng)態(tài)的創(chuàng)建絕對(duì)路徑。其中，__dirname是Node.js的一個(gè)工具變量，它表示當(dāng)前文件的目錄名。output.filename: 這個(gè)屬性表示打包結(jié)果的文件名。它的名字可以是任意的，只不過(guò)我們習(xí)慣叫它bundle.js。
來(lái)看看bundle.js
閱讀生成的bundle.js代碼，可以給我們帶來(lái)一些啟發(fā)。
// the webpack bootstrap
(function (modules) {
// The module cache
var installedModules = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
// Create a new module (and put it into the cache)
// Execute the module function
// Flag the module as loaded
// Return the exports of the module
}
// expose the modules object (__webpack_modules__)
// expose the module cache
// Load entry module and return exports
return __webpack_require__(0);
})
/************************************************************************/
([
// index.js - our application logic
/* 0 */
function (module, exports, __webpack_require__) {
var multiply = __webpack_require__(1);
var sum = __webpack_require__(2);
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
},
// multiply.js
/* 1 */
function (module, exports, __webpack_require__) {
var sum = __webpack_require__(2);
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;
},
// sum.js
/* 2 */
function (module, exports) {
var sum = function (a, b) {
return a + b;
};
module.exports = sum;
}
]);從上面的代碼可以看出，Webpack把每一個(gè)js腳本都封裝到一個(gè)模塊中，并把這些模塊放進(jìn)數(shù)組中。模塊數(shù)組被傳入Webpack的引導(dǎo)程序中，引導(dǎo)程序會(huì)把這些模塊加入Webpack并執(zhí)行，使得模塊可用。
這里bundle.js返回的是__webpack_require__(0)，而這剛好對(duì)應(yīng)了模塊數(shù)組中的index.js部分?；诖宋覀兺瑯涌梢缘玫秸_的運(yùn)行結(jié)果，而不需要處理依賴(lài)管理，下載依賴(lài)的次數(shù)也僅需要一次。
Loader讓W(xué)ebpack更好用
Webpack僅能理解最基本的JavaScript ES5代碼，它自身僅支持創(chuàng)建模塊并打包JavaScript ES5。如果我們不僅僅局限于JavaScript ES5，例如我們想使用ES2015，這就需要告訴Webpack如何處理ES2015。這里我們的處理方式往往是，我們需要將其它語(yǔ)言（如TypeScript）或其它版本（如ES2015）預(yù)處理成JavaScript ES5，再讓W(xué)ebpack做打包。這里就需要使用Babel來(lái)做轉(zhuǎn)換，把ES2015轉(zhuǎn)換為ES5（當(dāng)然Babel能做的事情遠(yuǎn)不止如此）。
為了說(shuō)明這個(gè)過(guò)程，我們使用ES2015重寫(xiě)之前的功能。
index.js
import multiply from './multiply';
import sum from './sum';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
console.log(`Product of 5 and 3 = ${totalMultiply}`);
console.log(`Sum of 5 and 3 = ${totalSum}`);multiply.js
import sum from './sum';
const multiply = (a, b) => {
let total = 0;
for(let i=0;i<b;i++) {
total = sum(a, total);
}
return total;
};
export default multiply;sum.js
const sum = (a, b) => a + b; export default sum;
這里我們使用了很多ES2015的新特性，例如箭頭函數(shù)、const關(guān)鍵字、模板字符串和ES2015的導(dǎo)入導(dǎo)出。ES2015的代碼Webpack無(wú)法處理，所以我們需要Babel來(lái)進(jìn)行轉(zhuǎn)換。想要讓Babel配合Webpack完成工作，我們就需要用到Babel Loader。事實(shí)上，Loader就是Webpack處理JavaScript ES5以外內(nèi)容的方式。有了加載器，我們就可以讓W(xué)ebpack處理各式各樣的文件。
想要在Webpack中使用Babel Loader，我們還需要三個(gè)Babel依賴(lài)：
babel-loader: 提供Babel與Webpack之間的接口；babel-core: 提供讀取和解析代碼的功能，并生成對(duì)應(yīng)的輸出；babel-preset-es2015: 提供將ES2015轉(zhuǎn)換為ES5的Babel規(guī)則；
在Webpack中配置Babel Loader的代碼，差不多是下面這樣子：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
};這段代碼你可以在webpack.config.js中找到。值得注意的是，Webpack中是支持同時(shí)存在多個(gè)Loader的，所以提供的值是一個(gè)數(shù)組。接著，還是讓我們來(lái)看看每個(gè)屬性代表的含義。
test: 我們只希望Loader處理JavaScript文件，這里通過(guò)一個(gè)正則表達(dá)式匹配.js文件；loader: 要使用的Loader，這里使用了babel-loader；exclude: 哪些文件不需要被處理，這里我們不希望Babel處理node_modules下的任何文件；query.presets: 我們需要使用哪個(gè)規(guī)則，這里我們使用Babel轉(zhuǎn)換ES2015的規(guī)則；
配置好這些內(nèi)容后，再次查看打包生成的bundle.js，其中的內(nèi)容看起來(lái)就像下面這樣：
/* 2 */
function(module, exports) {
var sum = function sum(a, b) {
return a + b;
};
module.exports = sum;
}可以看到，Babel Loader已經(jīng)把ES2015的代碼變成了ES5的代碼。
CSS與樣式，讓W(xué)ebpack看起來(lái)更出色
接下來(lái)，讓我們拓展上面的例子，輸出計(jì)算結(jié)果。我們將在頁(yè)面上創(chuàng)建一個(gè)body，然后把乘積與加和的結(jié)果添加到span中。
import multiply from './multiply';
import sum from './sum';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
document.body.appendChild(multiplyResultsSpan);
document.body.appendChild(sumResultSpan);這段代碼的輸出結(jié)果，應(yīng)該與之前是一致的，區(qū)別僅在于顯示在頁(yè)面上。
Product of 5 and 3 = 15 Sum of 5 and 3 = 8
我們可以使用CSS來(lái)美化這個(gè)結(jié)果，比如，我們可以讓每個(gè)結(jié)果都獨(dú)占一行，并且給每個(gè)結(jié)果都加上邊框。為了實(shí)現(xiàn)這一點(diǎn)，我們可以使用如下的CSS代碼。
span {
border: 5px solid brown;
display: block;
}我們需要將這個(gè)CSS也導(dǎo)入應(yīng)用中。這里最簡(jiǎn)單的解決方案是，在我們的html中添加一個(gè)link標(biāo)簽。但有了Webpack提供的強(qiáng)大功能，我們可以先導(dǎo)入它，再用Webpack來(lái)處理這個(gè)樣式。
在代碼中導(dǎo)入CSS帶來(lái)的另一個(gè)好處是，開(kāi)發(fā)者可以清晰的看到CSS與其使用之間的關(guān)聯(lián)。這里需要注意的是，CSS的作用域并不局限于它所導(dǎo)入的模塊本身，其作用域仍然是全局的，但從開(kāi)發(fā)者的角度看，這樣使用更加清晰。
import multiply from './multiply';
import sum from './sum';
// import the CSS we want to use here
import './math_output.css';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
document.body.appendChild(multiplyResultsSpan);
document.body.appendChild(sumResultSpan);這段代碼中，與前面代碼的唯一區(qū)別在于，我們導(dǎo)入了CSS。我們需要兩個(gè)Loader來(lái)處理我們的CSS：
css-loader: 用于處理CSS導(dǎo)入，具體來(lái)說(shuō)，獲取導(dǎo)入的CSS并加載CSS文件內(nèi)容；style-loader: 獲取CSS數(shù)據(jù)，并添加它們到HTML文檔中；
現(xiàn)在我們?cè)?code>webpack.config.js中的Webpack配置看起來(lái)像這樣：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};我們還是來(lái)看看新增的CSS配置屬性所表示的內(nèi)容。
test: 我們需要告訴Loader，我們只需要它處理CSS文件。這里的正則表達(dá)式僅匹配CSS文件。loaders: 這里與前面不同的是，我們使用了多個(gè)Loader。還有一個(gè)需要注意的細(xì)節(jié)是，Webpack從右向左處理loader，因此css-loader處理的結(jié)果（讀出CSS文件內(nèi)容）會(huì)被傳遞給style-loader，最終得到的是style-loader的處理結(jié)果（將樣式添加到HTML文檔中）。
假如我們現(xiàn)在需要提取CSS，并輸出到一個(gè)文件中，再導(dǎo)入該文件。為了實(shí)現(xiàn)這一點(diǎn)，我們就要用到Plugin。Loader的作用在于，在數(shù)據(jù)被打包輸出前進(jìn)行預(yù)處理。而Plugin則可以阻止預(yù)處理的內(nèi)容直接出現(xiàn)在我們的打包結(jié)果中。
我們的Webpack配置現(xiàn)在變成了這樣：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};在這段代碼的頂部，我們導(dǎo)入了ExtractTextPlugin，并使用這個(gè)插件改造了之前的CSS Loader。這里的作用是，css-loader的處理結(jié)果不再直接返回給Webpack，而是傳遞給ExtractTextPlugin。在底部我們配置了這個(gè)Plugin。
這里配置的作用是，對(duì)于傳遞給ExtractTextPlugin的CSS樣式數(shù)據(jù)，將會(huì)被保存在名為style.css的文件中。這樣做的好處與之前處理JavaScript時(shí)一樣，我們可以將多個(gè)獨(dú)立的CSS文件合并為一個(gè)文件，從而減少加載樣式時(shí)的下載次數(shù)。
最終我們可以直接使用我們合并好的CSS，實(shí)現(xiàn)和之前一致的效果。
<html>
<head>
<link rel="stylesheet" href="dist/style.css"/>
<script src="./dist/bundle.js""></script>
</head>
</html>使用Webpack處理圖片
現(xiàn)在我們開(kāi)始嘗試向應(yīng)用中添加圖片，并讓W(xué)ebpack來(lái)協(xié)助我們處理這些圖片。這里我們添加了兩張圖片，一個(gè)用于求和，一個(gè)用于求積。為了讓W(xué)ebpack有能力處理這些圖片，我們使用這兩個(gè)Loader：
image-webpack-loader: 嘗試幫助我們自動(dòng)壓縮圖片體積；url-loader: 如果image-webpack-loader的輸出圖片體積小，就內(nèi)聯(lián)使用這些圖片，如果image-webpack-loader的輸出圖片體積大，就將圖像包含在輸出目錄中；
我們準(zhǔn)備了兩張圖片，用于求積的圖片（multiply.png）相對(duì)較大，用于求和的圖片（sum.png）相對(duì)較小。首先，我們添加一個(gè)圖片工具方法，這個(gè)方法會(huì)為我們創(chuàng)建圖片，并將圖片添加到文檔中。
image_util.js
const addImageToPage = (imageSrc) => {
const image = document.createElement('img');
image.src = imageSrc;
image.style.height = '100px';
image.style.width = '100px';
document.body.appendChild(image);
};
export default addImageToPage;接著，讓我們導(dǎo)入這個(gè)圖片工具方法，以及我們想要添加到index.js中的圖片。
import multiply from './multiply';
import sum from './sum';
// import our image utility
import addImageToPage from './image_util';
// import the images we want to use
import multiplyImg from '../images/multiply.png';
import sumImg from '../images/sum.png';
// import the CSS we want to use here
import './math_output.css';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
addImageToPage(multiplyImg);
document.body.appendChild(multiplyResultsSpan);
addImageToPage(sumImg);
document.body.appendChild(sumResultSpan);最后，我們還是來(lái)修改webpack.config.js，配置兩個(gè)新的Loader來(lái)處理這些圖片。
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css-loader')
},
{
test: /.png$/,
loaders: [
'url-loader?limit=5000',
'image-webpack-loader'
]
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};還是老規(guī)矩，我們來(lái)看看新增的參數(shù)都表示什么含義。
output.publicPath: 讓url-loader知道，保存到磁盤(pán)的文件需要添加指定的前綴。例如，我們需要保存一個(gè)output_file.png，那么最終保存的路徑應(yīng)該是dist/output_file.png；test: 還是和之前一樣，通過(guò)正則表達(dá)式匹配圖像文件，非圖像文件不處理；loaders: 這里還是要再?gòu)?qiáng)調(diào)一下，Webpack從右向左處理loader，因此image-webpack-loader的處理結(jié)果將會(huì)被傳遞給url-loader繼續(xù)處理。
現(xiàn)在我們執(zhí)行Webpack打包，會(huì)得到下面三個(gè)東西。
38ba485a2e2306d9ad96d479e36d2e7b.png bundle.js style.css
這里的38ba485a2e2306d9ad96d479e36d2e7b.png實(shí)際上就是我們的大圖片multiply.png，較小的圖片sum.png會(huì)被內(nèi)聯(lián)到bundle.js中，就像下面這樣。
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL...."
這其實(shí)相當(dāng)于
img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL..."
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻??！
以上是Webpack是什麼？詳解它是如何運(yùn)作的？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
VUE3入門(mén)教學(xué)：使用Webpack進(jìn)行打包和構(gòu)建
Jun 15, 2023 pm 06:17 PM
Vue是一款優(yōu)秀的JavaScript框架，它可以幫助我們快速建立互動(dòng)性強(qiáng)、高效性好的Web應(yīng)用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專(zhuān)案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構(gòu)Vue3應(yīng)用程式。 1.安裝Webpack
vite和webpack的差別是什麼
Jan 11, 2023 pm 02:55 PM
差異：1、webpack伺服器啟動(dòng)速度比vite慢；由於vite啟動(dòng)的時(shí)候不需要打包，也就不需要分析模組依賴(lài)、編譯，所以啟動(dòng)速度非?？?。 2.vite熱更新比webpack快；vite在HRM方面，當(dāng)某個(gè)模組內(nèi)容改變時(shí)，就讓瀏覽器去重新請(qǐng)求該模組即可。 3.vite用esbuild預(yù)先建置依賴(lài)，而webpack基於node。 4.vite的生態(tài)不如webpack，載入器、插件不夠豐富。
如何使用PHP和webpack進(jìn)行模組化開(kāi)發(fā)
May 11, 2023 pm 03:52 PM
隨著Web開(kāi)發(fā)技術(shù)的不斷發(fā)展，前後端分離、模組化開(kāi)發(fā)已成為了廣泛的趨勢(shì)。 PHP作為一種常用的後端語(yǔ)言，在進(jìn)行模組化開(kāi)發(fā)時(shí)，我們需要使用一些工具來(lái)實(shí)現(xiàn)模組的管理和打包，其中webpack是一個(gè)非常好用的模組化打包工具。本文將介紹如何使用PHP和webpack進(jìn)行模組化開(kāi)發(fā)。一、什麼是模組化開(kāi)發(fā)模組化開(kāi)發(fā)是指將程式分解成不同的獨(dú)立模組，每個(gè)模組都有自己的作
webpack怎麼將es6轉(zhuǎn)成es5的模組
Oct 18, 2022 pm 03:48 PM
設(shè)定方法：1.用導(dǎo)入的方法把ES6程式碼放到打包的js程式碼檔案中；2、利用npm工具安裝babel-loader工具，語(yǔ)法「npm install -D babel-loader @babel/core @babel/preset- env」；3、建立babel工具的設(shè)定檔「.babelrc」並設(shè)定轉(zhuǎn)碼規(guī)則；4、在webpack.config.js檔案中設(shè)定打包規(guī)則即可。
使用Spring Boot和Webpack建構(gòu)前端工程和插件系統(tǒng)
Jun 22, 2023 am 09:13 AM
隨著現(xiàn)代Web應(yīng)用程式的複雜性不斷增加，建立優(yōu)秀的前端工程和插件系統(tǒng)變得越來(lái)越重要。隨著SpringBoot和Webpack的流行，它們成為了一個(gè)建構(gòu)前端工程和插件系統(tǒng)的完美組合。 SpringBoot是一個(gè)Java框架，它以最小的配置需求來(lái)建立Java應(yīng)用程式。它提供了許多有用的功能，例如自動(dòng)配置，使開(kāi)發(fā)人員可以更快、更輕鬆地建立和部署Web應(yīng)用程式。 W
vue webpack可打包哪些文件
Dec 20, 2022 pm 07:44 PM
在vue中，webpack可以將js、css、圖片、json等檔案打包為適當(dāng)?shù)母袷?，以供瀏覽器使用；在webpack中js、css、圖片、json等檔案類(lèi)型都可以被當(dāng)作模組來(lái)使用。 webpack中各種模組資源可打包合併成一個(gè)或多個(gè)包，並且在打包的過(guò)程中，可以對(duì)資源進(jìn)行處理，如壓縮圖片、將scss轉(zhuǎn)成css、將ES6語(yǔ)法轉(zhuǎn)成ES5等可以被html識(shí)別的文件類(lèi)型。
Webpack是什麼？詳解它是如何運(yùn)作的？
Oct 13, 2022 pm 07:36 PM
Webpack是一款模組打包工具。它為不同的依賴(lài)創(chuàng)建模組，將其整體打包成可管理的輸出檔案。這一點(diǎn)對(duì)於單頁(yè)面應(yīng)用程式（現(xiàn)今Web應(yīng)用的事實(shí)標(biāo)準(zhǔn)）來(lái)說(shuō)特別有用。
深析webpack的打包流程與原理
Aug 09, 2022 pm 05:11 PM
Webpack 是如何實(shí)作打包的？以下這篇文章就來(lái)帶大家深入了解Webpack 打包原理，希望對(duì)大家有幫助！
