淺談webpack和webpack-cli模塊源碼分析
webpack4與webpack3的區(qū)別
webpack4.0
以后,似乎執(zhí)行方式就發(fā)生了改變,不再是 webpack
一波流,而是多了一個(gè) webpack-cli
。webpack3
中webpack-cli
是合在webpack
中。所以在命令行運(yùn)行 webpack
命令的同時(shí),會(huì)提示讓你再裝一個(gè) webpack-cli
。
執(zhí)行腳本到打包結(jié)束流程
1、當(dāng)我們安裝了webpack
模塊后,就會(huì)在node_modules/.bin
目錄下生成一個(gè)webpack、webpack.cmd,webpack
是linux
下的命令腳本,webpack.cmd
是windows
下命令腳本,webpack.cmd
可以在windows
系統(tǒng)上直接運(yùn)行。
每當(dāng)執(zhí)行npm run
,就會(huì)自動(dòng)新建一個(gè) Shell
,在這個(gè) Shell
里面執(zhí)行指定的腳本命令。因此,只要是 Shell
(一般是 Bash
)可以運(yùn)行的命令,就可以寫在 npm
腳本里面。
比較特別的是,npm run
新建的這個(gè) Shell,會(huì)將當(dāng)前目錄的node_modules/.bin
子目錄加入PATH
變量(軟連接),執(zhí)行結(jié)束后,再將PATH
變量恢復(fù)原樣。
這意味著,當(dāng)前目錄的node_modules/.bin
子目錄里面的所有腳本,都可以直接用腳本名調(diào)用,而不必加上路徑。比如,當(dāng)前項(xiàng)目的依賴?yán)锩嬗?Mocha
,只要直接寫mocha test
就可以了。
執(zhí)行一下命令 cd .\node_modules\.bin\
2、package.json
中script
配置dev: webpack --mode development
,當(dāng)執(zhí)行npm run dev
相當(dāng)于執(zhí)行webpack --mode development
webpack.cmd
執(zhí)行時(shí)會(huì)判斷當(dāng)前目錄下是否存在node
執(zhí)行程序,如果存在就使用當(dāng)前node
進(jìn)程執(zhí)行node_modules/webpack/bin/webpack.js
,如果當(dāng)前目錄下不存在node
進(jìn)程,則使用全局(也就是本地)node
執(zhí)行node_modules/webpack/bin/webpack.js
文件
3、node_modules/webpack/bin/webpack.js
首先會(huì)判斷是否安裝了webpack-cli
模塊,如果沒有安裝webpack-cli
模塊就會(huì)引導(dǎo)用戶去安裝,如果已經(jīng)安裝了webpack-cli
模塊,就會(huì)去執(zhí)行node_modules\webpack-cli\bin\cli.js
CLIs = [ { name: "webpack-cli", package: "webpack-cli", binName: "webpack-cli", alias: "cli", installed: isInstalled("webpack-cli"), recommended: true, url: "https://github.com/webpack/webpack-cli", description: "The original webpack full-featured CLI." }, { // some coding } ]; const installedClis = CLIs.filter(cli => cli.installed); if (installedClis.length === 0) { // some coding const question = `Do you want to install 'webpack-cli' (yes/no): `; // some coding } else if (installedClis.length === 1) { const path = require("path"); const pkgPath = require.resolve(`${installedClis[0].package}/package.json`); const pkg = require(pkgPath); console.log(path.resolve( path.dirname(pkgPath), pkg.bin[installedClis[0].binName] )) // E:\項(xiàng)目\webpack學(xué)習(xí)\node_modules\webpack-cli\bin\cli.js require(path.resolve( path.dirname(pkgPath), pkg.bin[installedClis[0].binName] )); }
4、node_modules\webpack-cli\bin\cli.js
中會(huì)require("webpack")
引入webpack
模塊(/node_modules/lib/webpack.js
)得到一個(gè)webpack
函數(shù),運(yùn)行webpack
函數(shù),返回一個(gè)compiler
對(duì)象,執(zhí)行compiler
中的run
,開始編譯
// node_modules/bin/cli.js (function() { // 一大堆配置 // something code ... yargs.parse(process.argv.slice(2), (err, argv, output) => { // something code ... function processOptions(options) { // 各種if else 過濾和配置 // something code... const webpack = require("webpack"); let compiler; try { // 運(yùn)行webpack函數(shù),返回一個(gè)compiler對(duì)象 compiler = webpack(options); } catch (err) { // something code... } // 執(zhí)行compiler中的run,開始編譯。 compiler.run(compilerCallback); } processOptions(options); }) // something code ... })()
// node_modules/webpack/lib/webpack.js const webpack = (options, callback) => { // some coding return compiler; } exports = module.exports = webpack;
參考:
npm 腳本的原理:http://chabaoo.cn/article/148443.htm
webpack-cli源碼解析:https://www.jianshu.com/p/ec8e70d362ef
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript封裝axios的實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript封裝axios的實(shí)現(xiàn),Axios是一個(gè)開放源代碼庫(kù),使我們可以輕松地發(fā)出HTTP請(qǐng)求。 實(shí)際上,它是通過額外的超能力來fetch2022-09-09JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
這篇文章主要介紹了JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08純前端JavaScript實(shí)現(xiàn)Excel IO案例分享
這篇文章主要為大家詳細(xì)介紹了純前端JavaScript實(shí)現(xiàn)Excel IO案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫(api實(shí)現(xiàn))
這篇文章主要介紹了mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫,這里使用小程序自帶的api來實(shí)現(xiàn),文中通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-10-10JS如何實(shí)現(xiàn)頁(yè)面截屏功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JS如何實(shí)現(xiàn)頁(yè)面截屏功能的相關(guān)資料,文中主要利用了html2canvas和canvas繪制兩個(gè)方法來實(shí)現(xiàn),需要的朋友可以參考下2021-06-06IE和Firefox下javascript的兼容寫法小結(jié)
學(xué)習(xí)js的朋友必須要知道或了解的知識(shí)2008-12-12js實(shí)現(xiàn)彈出窗口、頁(yè)面變成灰色并不可操作的例子分享
為了更好的用戶體驗(yàn),現(xiàn)在網(wǎng)頁(yè)中好多地方都使用彈出層。比如提示登陸,掃描微信二維碼圖片,論壇下載彈出扣除積分提醒等。2014-05-05詳解微信圖片防盜鏈“此圖片來自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案
這篇文章主要介紹了詳解微信圖片防盜鏈“此圖片來自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏
這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10