Loaders
鼎鼎大名的Loaders登場了!
Loaders
是webpack
提供的最激動人心的功能之一了。通過使用不同的loader
,webpack
有能力調用外部的腳本或工具,實現對不同格式的文件的處理,比如說分析轉換scss爲css,或者把下一代的JS文件(ES6,ES7)轉換爲現代瀏覽器兼容的JS文件,對React的開發而言,合適的Loaders可以把React的中用到的JSX文件轉換爲JS文件。
Loaders需要單獨安裝並且需要在webpack.config.js
中的modules
關鍵字下進行配置,Loaders的配置包括以下幾方面:
test
:一個用以匹配loaders所處理文件的拓展名的正則表達式(必須)loader
:loader的名稱(必須)include/exclude
:手動添加必須處理的文件(文件夾)或屏蔽不需要處理的文件(文件夾)(可選);query
:爲loaders提供額外的設置選項(可選)
使用loader
require的方式使用loader
配置文件中使用loader
CLI的方式使用loader --module-bind命令後跟指定的loader
--module-bind "css=style!css"
babel 安裝
執行命令行:
npm install --save-dev babel-loader babel-core(按照babel-loader,和babel-core)
安裝babel中的 preset-latest 插件
版本不斷的更新,要指定參數,使用 presets,告訴babel-loader怎麼處理我們的js,讓它爲我們的js去轉換指定的某一些特性:- 轉換es2015的特性 指定es2015 。。。如要轉換所有的特性,指定latest,包括一下:
那我們怎麼指定這些插件呢?(參考webpack官網,query parameters 參數部分)
1.require方式中,loader的後面+?+參數
在配置文件webpack.config.js中指定:
可以在package.json 文件中指定(在package.json指定後,無需在配置文件中指定)
打包過程中,會發現babel loader 轉換特別耗時,如何改善呢?
例如,exclude,include參數
以上exclude,include的路徑有誤,官方解釋:可以是正則表達式,可以是絕對路徑的字符串,還可以是個函數,數組。。。
require node——module中的path path.resolve(__dirname,'mode_modules') 解析絕對路徑(當前路徑+文件所在的相對路徑),
npm run webpack 打包一下會發現打包速度快很多