<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          webpack中loader加載器的使用及原理

          時間:?2017-11-29閱讀:?6174標簽:?loader

          webpack的loaders是一塊很重要的組成部分。我們都知道webpack是用于資源打包的,里面的所有資源都是“模塊”,內部實現了對模塊資源進行加載的機制。但是Webpack本身只能處理 js模塊,如果要處理其他類型的文件,就需要使用 loader 進行轉換。  Loader 可以理解為是模塊和資源的轉換器,它本身是一個函數,接受源文件作為參數,返回轉換的結果,例如可以使用loader加載器可以快速編譯預處理器(less,sass,coffeeScript)。 Loader 可以在require()引用模塊的時候添加,也可以在 webpack 全局配置中進行綁定,還可以通過命令行的方式使用。


          loader的特性是: 

          loaders可以串聯,他們應用于管道資源,最后的loader將返回javascript,其它的可返回任意格式(傳遞給下一個loader)

          loaders 可以同步也可以異步

          loaders在nodejs下運行并且可以做一切可能的事 loader接受參數,可用于配置里 

          loaders可以綁定到extension/RegExps 配置 

          loaders可以通過npm發布和安裝 正常的模塊兒可以到處一個

          loader除了 loaders可以訪問配置 插件可以給loaders更多的特性

          loaders可以釋放任意額外的文件


          安裝loader

          npm install xxx-loader --save-dev

          常用的loader加載器有哪些?

          1.loaders之預處理

          css-loader 處理css中路徑引用等問題 
          style-loader 動態把樣式寫入css 
          sass-loader scss編譯器 
          less-loader less編譯器 
          postcss-loader scss再處理

          webpack.config.js的配置:

          npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader //安裝
          //配置
          module: {
            loaders: [
              {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
              {test: /\.less$/, loader: "style!css!less|postcss"},
              {test: /\.scss$/, loader: "style!css!sass|postcss"}
            ]
          }


          2.loader的 js處理

          babel-loader:轉化ES6代碼
          jsx-loader:識別js中的 jsx 語法

          安裝:npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

          新建一個名字為.babelrc的配置文件:

          {   
          	"presets": ["es2015","react"],   
          	"plugins":["antd"] 
          }

          webpack.config.js文件配置:

          module: {
          	loaders: [
          	  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
          	  {test: /\.jsx$/, loader: "jsx-loader"}
              ]
          }


          3.其他loader加載器

          url-loader: 圖片處理 npm install --save-dev url-loadr
          file-loader: 文件加載 npm install --save-dev file-loader 
          json-loader:json處理 npm install --save-dev json-loader 
          raw-loader: html處理 npm install --save-dev raw-loader

          webpack.config.js文件配置: 

          module: {
            loaders: [
              {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
              {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'},
              {test: /\.json$/,loader: 'json'},
              {test: /\.html$/,loader: 'raw'},
            ]
          }


          在配置module的loaders。loaders是一個數組,里面的每一個對象都用正則表達式,對應著一種配對方案。loader加載器用于將不同的文件加載到js文件中,比如url-loader用于在js中加載png/jpg格式的圖片文件;css/style loader用于加載css文件;less-loader加載器是將less編譯成css文件;不同的處理器通過!分隔并串聯起來。這里的loader是可以省略掉-loader這樣的,也就是原本應該寫成style-loader!css-loader!sass-loader。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/196

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网