webpack系統(tǒng)學習

本質(zhì)上，webpack?是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個?bundle。

webpack 4.0 的四個核心概念

入口（entry）

輸出（output）

loader

插件（plugins）

入口（entry）

是指webpack開始分析文件的起點，可以配置多個，以適配多頁面

// 單頁面配置

module.exports = {

entry: './path/to/my/entry/file.js'

};

// 多頁面配置

moudle.exports = {

entry: {

app: './src/app.js'

vendors: './src/verdors.js'

}

}

在多頁面應用中，每當頁面跳轉(zhuǎn)時服務器會為你獲取一個新的html，頁面重新加載新文檔，并且資源被重新下載，然而，這給我們特殊的機會去做更多的事情

使用CommonsChunkPlugin 為每個頁面間的應用程序共享代碼創(chuàng)建bundle，由于入口起點增多，多頁應用能夠復用入口起點之前的大量代碼/模塊，從而可以極大地從這些技術(shù)中收益

出口 （output）

webpack中使用output屬性來控制如何向硬盤寫入編譯文件，即使多個入口，但最后的輸出配置只能有一個

output的屬性最簡單的是

filename 用于輸出文件的文件名

目標輸出目錄path的絕對路徑

const config = {

output：{

filename: 'bundle.js',

path: '/home/proj/public/assets'

}

}

module.exports = config

此配置是將單獨的bundle.js 文件輸出到/home/proj/public/asstes/ 目錄中

多個入口起點 使用占位符如下面的?[name]

{

entry: {

app:'./src/app.js',

search: './src/search.js'

},

output: {

filename: '[name].js',

path: __dirname + '/dist'

}

}

使用cdn和資源hash的復雜示例

output: {

path: "/home/proj/cdn/assets/[hash]",

publicPath: "http://cdn.example.com/assets/[hash]/"

}

loader

loader 用于對模塊的源代碼進行轉(zhuǎn)換。?loader 可以使你在?import?或"加載"模塊時預處理文件

loader運行你自定義擴展項目中的文件，使用對應的loade編譯成js， css， html

loader配置在rules數(shù)組數(shù)組中

其中每一條記錄，test表示正則匹配的文件范圍

loader表示loader的名稱

loader的配置有三種

配置: 在webpack.config.js 文件中制定loader

內(nèi)聯(lián)： 在每個import語句中顯式指定loader

CLI：在shell命令中指定它們

配置的案例

module:{

rules: [

{

test: /\.css$/,

use: [

{loader: 'style-loader'},

{loader: 'css-loader',

{

options: {modules:true}

}

}

]

}

]

}

內(nèi)聯(lián)

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

loader 特性

loader支持鏈式傳遞， 一個文件可能會被多個loader處理，前一個loader返回值給下一個loader，在最后一個loader

，返回webpack所預期的JavaScript

loader可以是異步的，也可以是同步的

loader運行在Node.js中，并且能夠執(zhí)行任何可能的操作

loader接受查詢參數(shù)，用于對loader傳遞配置

loader也能夠使用options對象進行配置

webpack

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。