webpack常用配置總覽

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

配置示例

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

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

補充

補充1.chunkname是什么

就是打包后代碼塊的名字

補充2.補充不同的庫導出方式的區別

var

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

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

window 將模塊放在window上

window["MyLibrary"]?=?_entry_return_;

window.MyLibrary.doSomething();

global 調動方式使用global['myLibrary']

commonjs

commonjs2

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

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

那么其實commonjs的規定就是使用exports進行導出，而我們經常使用module.exports導出，webpack此處的方式其實就是選擇到底是用exports導出還是module.exports導出，區別在于
如果選擇commonjs

//?webpack輸出為
exports['LibraryName']?=?_entry_return_;
//?使用庫的方法為
require('library-name-in-npm')['LibraryName'].doSomething();
//?原因其實就是這么導出最后其實是
//?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什么區別？

我的理解是

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

補充5. 關于mainFields的解釋

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

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

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

參考文章:

• webpack4 從零學習常用配置(小結)

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

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

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

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