webpack2.x基礎屬性講解(二)


resolve:模塊的處理方案
 
resolve.alias:設置模塊別名,便於我們更方便引用
通過在resolve.alias對引用的文件設置別名,對引用的模塊名稱進行簡寫和地址重定向(例:bootstrap的引用)
 

resolve.extensions:默認解析擴展路徑,設置完成后再引入文件后可以節約后綴名 如.js .css .sass等
resolve.modules:設置解析器查找模塊的目錄,默認是npm使用npm下載的node_modules下
上面是我們常用的配置命令,剩下還有些額外其他的 暫時沒有使用到的具體位置,所以就簡單介紹一下
 
resolve.mainFields:解析一個目錄時,配置的文件將視為文件的入口文件。
下面的代碼設置在解析jquery的文件路徑時,進入到jquery下的main.js 或者bower.js進行引用

resolve.descriptionFiles:描述文件,配置文件將在目錄中讀取
如 resolve:{descritionFiles:['package.json','bower.json']}
 
resolve.aliasFields:別名字段 描述文件中這些字段提供了該包的別名對照關系

 

resolve.enforceExtension:bool值; 是否強制使用擴展名。如果為false時候,在解析一個文件,也會嘗試匹配無擴展名的文件
 
resolve.moduleExtensions: 模塊后綴名,解析一個模塊時,將會嘗試附加這些后綴名

 

resolve.enforceModuleExtension:bool值.強制使用模塊后綴名,如果值為false,在解析一個模塊名時,也會嘗試匹配不包含后綴名的模塊。
 
Externals:用於設置引用外部的環境進行模塊構建,有利於程序優化,注意一點 externals配置的外部變量對象一般為某一個插件提供的對象。如:jquery=>$|jQuery  swiper=>Swiper angular=>Angular
 

 

 

 

plugins:用語webpack在構建工具時的多種創建方式

 

webpack內置對象optimize 用來對構建的文件進行優化,提供了兩個方法
optimize.uglifyJsPlugin : 壓縮js文件
optimize.CommonsChunkPlugin:js編譯文件的模塊提取(我個人認為webpack比gulp好的一塊 分割代碼)
 
ExtractTextPlugin:編譯文件的css模塊提取
 
注:大部分plugins需要額外進行下載

 

以上基礎的的webpack屬性就簡單over了  當然后面有些其他的額外例子  供給大家學習,語言方面不是很有天分,只能靠補了 ,大家互勉

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM