看《深入淺出webpack》總結(jié)一下常用的webpack的屬性的含義并加了一些自己的鏈接，寫在一個文件下更能有全局感受，更能理解各個屬性中間的關(guān)系，重點要關(guān)注entry,output,resolve,module,?plugins幾部分

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、平昌網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、電子商務(wù)商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為平昌等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

配置示例

這并不是一個拿來可用的配置，主要是為了更好理解常用的一些webpack屬性的作用，所以每一行都有注釋，放到一起，更能看到每一個屬性在其中的作用

module.exports?=?{
//?__dirname值為所在文件的目錄，context默認(rèn)為執(zhí)行webpack命令所在的目錄
context:?path.resolve(__dirname,?'app'),
//?必填項，編譯入口，webpack啟動會從配置文件開始解析,如下三種(還有一種動態(tài)加載entry的方式就是給entry傳入一個函數(shù)，這個在項目比較大，頁面很多的情況下可以優(yōu)化編譯時間)
entry:?'./app/entry',?//?只有一個入口，入口只有一個文件
entry:?['./app/entry1',?'./app/entry2'],?//?只有一個入口，入口有兩個文件
//?兩個入口
entry:?{
entry1:?'./app/entry1',
entry2:?'./app/entry2'
},
//?輸出文件配置
output:?{
//?輸出文件存放的目錄，必須是string類型的絕對路徑
path:?path.resolve(__dirname,?'dist'),
//?輸出文件的名稱
filename:?'bundle.js',
filename:?'[name].js',?//?配置了多個入口entry是[name]的值會被入口的key值替換，此處輸出文件會輸出的文件名為entry1.js和entry2.js
filename:?[chunkhash].js,?//?根據(jù)chunk的內(nèi)容的Hash值生成文件的名稱，其他只還有id，hash，hash和chunkhash后面可以使用:number來取值，默認(rèn)為20位，比如[name]@[chunkhash:12].js,
//?文件發(fā)布到線上的資源的URL前綴，一般用于描述js和css位置，舉個例子，打包項目時會導(dǎo)出一些html,那么html里邊注入的script和link的地址就是通過這里配置的
publicPath:?"https://cdn.example.com/assets/",?//?CDN（總是?HTTPS?協(xié)議）
publicPath:?"http://cdn.example.com/assets/",?//?CDN?(協(xié)議相同)
publicPath:?"/assets/",?//?相對于服務(wù)(server-relative)
publicPath:?"assets/",?//?相對于?HTML?頁面
publicPath:?"../assets/",?//?相對于?HTML?頁面
publicPath:?"",?//?相對于?HTML?頁面（目錄相同）
//?當(dāng)需要構(gòu)建的項目可以被其他模塊導(dǎo)入使用，會用到libraryTarget和library
library:?'xxx',?//?配置導(dǎo)出庫的名稱，但是和libraryTarget有關(guān)，如果是commonjs2默認(rèn)導(dǎo)出這個名字就沒啥用
//?從webpack3.1.0開始，可以為每個target起不同的名稱
library:?{
root:?"MyLibrary",
amd:?"my-library",
commonjs:?"my-common-library"
},
libraryTarget:?'umd',?//?導(dǎo)出庫的類型，枚舉值:?umd、commonjs2、commonjs，amd、this、var(默認(rèn))、assign、window、global、jsonp(區(qū)別查看補充2)
//?需要單獨導(dǎo)出的子模塊，這樣可以直接在引用的時候使用子模塊，默認(rèn)的時候是_entry_return_
libraryExport:?'default',?//?__entry_return_.default
libraryExport:?'MyModule',?//?__entry_return_.MyModule
libraryExport:?['MyModule',?'MySubModule?'],?//?使用數(shù)組代表到指定模塊的取值路徑?__entry_return_.MyModule.MySubModule
//?配置無入口的chunk在輸出時的文件名稱，但僅用于在運行過程中生成的Chunk在輸出時的文件名稱，這個應(yīng)該一般和插件的導(dǎo)出有關(guān)，支持和filename一樣的內(nèi)置變量
chunkFilename:?'[id].js',
//?是否包含文件依賴相關(guān)的注釋信息，不懂？請看補充3，在mode為development的是默認(rèn)為true
pathinfo:?true,
//?JSONP異步加載chunk，或者拼接多個初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin)
jsonpFunction:?'myWebpackJsonp',
//?此選項會向應(yīng)盤寫入一個輸出文件，只在devtool啟動了sourceMap選項時采用，默認(rèn)為`[file].map`,除了和filename一樣外還可以使用[file]
sourceMapFilename:?'[file].map',
//?瀏覽器開發(fā)者工具里顯示的源碼模塊名稱，此選項僅在?「devtool?使用了需要模塊名稱的選項」時使用，使用source-map調(diào)試，關(guān)聯(lián)模塊鼠標(biāo)移動到上面的時候顯示的地址(截不到圖啊，醉了)，默認(rèn)這個值是有的，一般不需要關(guān)心
devtoolModuleFilenameTemplate:?'testtest://[resource-path]'
},
//?配置模塊相關(guān)
module:?{
rules:?[?//?配置loaders
{
test:?/\.jsx?$/,?//?匹配規(guī)則，匹配文件使用，一般使用正則表達值
include:?[path.resolve(__dirname,?'app')],?//?只會命中這個目錄文件
exclude:?[path.resolve(__diranme,?'app/demo-files')],?//?命中的時候排除的目錄
use:?[?//?使用的loader，每一項為一個loader，從該數(shù)組的最后一個往前執(zhí)行
'style-loader',?//?loader的名稱,這樣則是使用默認(rèn)配置，可以在后面加!配置屬性，也可以用下面方式
{
loader:?'css-loader',?//?loader的名稱
options:?{}?//?loader接受的參數(shù)
}
],
noParse:?[?//?不用解析和處理的模塊?RegExp?|?[RegExp]?|?function（從?webpack?3.0.0?開始）
/jquery|lodash/
]
}
]
},
//?配置插件，關(guān)于和loader區(qū)別見補充4
plugins:?[
//?壓縮js的plugin
new?webpack.optimize.UglifyJsPlugin({
compress:?{
warnings:?false,
drop_console:?false,
}
}),
],
//?解析文件引用的模塊的配置
resolve:?{
//?模塊的根目錄,默認(rèn)從node_modules開始找
modules:?[
'node_modules',
'browser_modules'
],
//?模塊的后綴名，我們引入模塊有時候不寫擴展名，自動補充擴展名的順序如下
extensions:?['.js',?'.json',?'.jsx',?'.css'],
//?模塊解析時候的別名
alias:?{
//?那么導(dǎo)入模塊時則可以寫import?myComponent?from?'$component/myComponent';
$component:?'./src/component',
//?末尾加$精確匹配
xyz$:?path.resolve(__dirname,?'path/to/file.js')
},
//?此選項決定優(yōu)先使用package.json配置哪份導(dǎo)出文件，詳見補充5
mainFields:?['jsnext:main',?'browser',?'main'],
//?是否強制導(dǎo)入語句寫明后綴
enforceExtension:?false,
//?是否將符號鏈接(symlink)解析到它們的符號鏈接位置(symlink?location)
symlinks:?true,
},
//?選擇一種?source?map?格式來增強調(diào)試過程。不同的值會明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
devtool:?'source-map',
//?配置輸出代碼的運行環(huán)境，可以為async-node，electron-main，electron-renderer，node，node-webkit，web(默認(rèn))，webworker
target:?'web',
externals:?{?//?使用來自于js運行環(huán)境提供的全局變量
jquery:?'jQuery'
},
//?控制臺輸出日志控制
stats:?{
assets:?true,?//?添加資源信息
colors:?true,?//?控制臺日志信息是否有顏色
errors:?true,?//?添加錯誤信息
errorDetails:?true,?//?添加錯誤的詳細(xì)信息（就像解析日志一樣）
hash:?true,?//?添加?compilation?的哈希值
},
devServer:?{?//?本地開發(fā)服務(wù)相關(guān)配置
proxy:?{?//?代理到后端服務(wù)接口
'/api':?'http://localhost:3000'
},
contentBase:?path.join(__dirname,?'public'),?//?配置devserver?http服務(wù)器文件的根目錄
compress:?true,?//?是否開啟gzip壓縮
hot:?true,?//?是否開啟模塊熱交換功能
https:?false,?//?是否開啟https模式
historyApiFallback:?true,?//?是否開發(fā)HTML5?History?API網(wǎng)頁，不太理解TODO
},
profile:?true,?//?是否捕捉webpack構(gòu)建的性能信息，用于分析是什么原因?qū)е碌臉?gòu)建性能不佳
cache:?false,?//?緩存生成的?webpack?模塊和?chunk，來改善構(gòu)建速度。緩存默認(rèn)在觀察模式(watch?mode)啟用。
cache:?{
//?如果傳遞一個對象，webpack?將使用這個對象進行緩存。保持對此對象的引用，將可以在?compiler?調(diào)用之間共享同一緩存：
cache:?SharedCache?//?let?SharedCache?=?{}
},
watch:?true,?//?是否啟用監(jiān)聽模式
watchOptions:?{?//?監(jiān)聽模式選項
ignored:?/node_modules/,?//?不監(jiān)聽的文件或文件夾，支持正則匹配，默認(rèn)為空
aggregateTimeout:?300,?監(jiān)聽到變化后，300ms再執(zhí)行動作，節(jié)流，防止文件更新頻率太快導(dǎo)致重新編譯頻率太快
poll:?1000?//?檢測文件是否變化，間隔時間
},
//?輸出文件的性能檢查配置
perfomance:?{
hints:?'warning',?//?有性能問題時輸出警告
hints:?'error',?//?有性能問題時輸出錯誤
hints:?false,?//?關(guān)閉性能檢查
maxAssetSize:?200000,?//?大文件大小，單位bytes
maxEntrypointSize:?400000,?//?大入口文件的大小，單位bytes
//?此屬性允許?webpack?控制用于計算性能提示的文件。
assetFilter:?function(assetFilename)?{
return?assetFilename.endsWith('.css')?||?assetFilename.endsWith('.js');
}
}
}

補充

補充1.chunkname是什么

就是打包后代碼塊的名字

補充2.補充不同的庫導(dǎo)出方式的區(qū)別

var

var?MyLibrary?=?_entry_return_;
//?在一個單獨的?script……
MyLibrary.doSomething();

assign 暴露到全局變量中，不要用this 分配給this，感覺會放在全局的this上,官網(wǎng)說取決于你

window 將模塊放在window上

window["MyLibrary"]?=?_entry_return_;

window.MyLibrary.doSomething();

global 調(diào)動方式使用global['myLibrary']

commonjs

commonjs2

說一下這兩種區(qū)別，其實這說到了exports和module.exports的區(qū)別，exports是module.exports的一個引用

module.exports?=?{};
exports?=?module.exports;
exports['aaaa']?=?1;?//?這樣是可以的，在module.exports上加了一個屬性
exports?=?2;?//?會導(dǎo)致exports脫離了對module.exports的引用
modules.exports?=?2?//?這樣?exports的至最后就是2

那么其實commonjs的規(guī)定就是使用exports進行導(dǎo)出，而我們經(jīng)常使用module.exports導(dǎo)出，webpack此處的方式其實就是選擇到底是用exports導(dǎo)出還是module.exports導(dǎo)出，區(qū)別在于
如果選擇commonjs

//?webpack輸出為
exports['LibraryName']?=?_entry_return_;
//?使用庫的方法為
require('library-name-in-npm')['LibraryName'].doSomething();
//?原因其實就是這么導(dǎo)出最后其實是
//?modules.exports?=?{?[LibraryName]:?_entry_return_?}

如果選擇commonjs2

//?webpack輸出為
module.exports?=?_entry_return_;
//?使用庫的方法為
require('library-name-in-npm').doSomething();

amd

//?webpack輸出
define("MyLibrary",?[],?function()?{
return?_entry_return_;?//?此模塊返回值，是入口?chunk?返回的值
});
//?使用
require(['MyLibrary'],?function(MyLibrary)?{
//?使用?library?做一些事……
});

umd 將你的模塊暴露為所有模塊定義下都可運行的方式

(function?webpackUniversalModuleDefinition(root,?factory)?{
if(typeof?exports?===?'object'?&&?typeof?module?===?'object')
module.exports?=?factory();
else?if(typeof?define?===?'function'?&&?define.amd)
define([],?factory);
else?if(typeof?exports?===?'object')
exports["MyLibrary"]?=?factory();
else
root["MyLibrary"]?=?factory();
})(typeof?self?!==?'undefined'???self?:?this,?function()?{
return?_entry_return_;?//?此模塊返回值，是入口?chunk?返回的值
});

jsonp 你的 library 的依賴將由 externals 配置定義。

MyLibrary(_entry_return_);

補充3.pathinfo到底是哪些玩意

補充4.plugins和loader什么區(qū)別？

我的理解是

loader使用來識別出特定文件，并轉(zhuǎn)換文件內(nèi)容，方便webpack使用，比如css文件要解析，需要將其轉(zhuǎn)換成js代碼放到j(luò)s中，才能被后續(xù)處理(當(dāng)然可以省略)，然后加入最后輸出的js當(dāng)中
plugin是幫助webpack做一些額外的工作，補充一些webpack本身沒有實現(xiàn)的功能，有種打補丁的意思，更專注于打包、編譯、輸出js文件等操作以及在某些階段要額外做的一些操作，比如html插件將其鏈接地址插入html

補充5. 關(guān)于mainFields的解釋

有一些第三方模塊會針對不同的環(huán)境提供幾份代碼，例如分別提供了ES5和ES6兩份代碼，在package.json中代碼如下：

{
"jsnext:main":?"es/index.js",?//?采用es6的入口文件
"main":?"lib/index.js",?//?采用es5語法的代碼入口文件
}

那么webpack會根據(jù)mainFields數(shù)組里的順序,逐步找到文件

參考文章:

• webpack4 從零學(xué)習(xí)常用配置(小結(jié))

• 5分鐘打造簡易高效的webpack常用配置

• webpack配置文件和常用配置項介紹

• webpack常用配置項配置文件介紹

文章同步發(fā)布：?https://www.geek-share.com/detail/2785396375.html

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：webpack常用配置總覽-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://aaarwkj.com/article42/ccdjec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App設(shè)計、靜態(tài)網(wǎng)站、域名注冊、響應(yīng)式網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)