webpack總結(2)引用loader方式,babel

Loaders

鼎鼎大名的Loaders登場了!

Loaderswebpack提供的最激動人心的功能之一了。通過使用不同的loaderwebpack有能力調用外部的腳本或工具,實現對不同格式的文件的處理,比如說分析轉換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 打包一下會發現打包速度快很多


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章