国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack進(jìn)階之loader篇

qylost / 2163人閱讀

webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laoder

一、loaders之 預(yù)處理

css-loader 處理css中路徑引用等問題

style-loader 動(dòng)態(tài)把樣式寫入css

sass-loader scss編譯器

less-loader less編譯器

postcss-loader scss再處理

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"}
  ]
}
二、loaders之 js處理

babel-loader

jsx-loader

npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

栗子

新建一個(gè)名字為.babelrc的文件

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

新建一個(gè)名字為webpack.config.js文件

module.exports ={
 entry: "./entry.js",
 output: { path: __dirname,
 filename: "bundle.js"
 },
 module: {
loaders: [
  {test: /.js$/, loader: "babel", exclude: /node_modules/},
  {test: /.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: "style!css"} ]
  }
};
三、loaders之 圖片處理

url-loader

npm install --save-dev url-loader

module: {
  loaders: [
    {test: /.(jpg|png)$/, loader: "url?limit=8192"},
  ]
}
四、loaders之 文件處理

file-loader

npm install --save-dev file-loader

module: {
  loaders: [
    {
      test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: "file"
      },
  ]
}
五、loaders之 json處理

json-loader

npm install --save-dev json-loader

module: {
  loaders: [
    {test: /.json$/,loader: "json"},
  ]
}
六、loaders之 html處理

raw-loader

npm install --save-dev raw-loader

module: {
  loaders: [
    { test: /.html$/,loader: "raw"},
  ]
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79693.html

相關(guān)文章

  • webpack進(jìn)階之插件篇

    摘要：基本環(huán)境搭建就不展開講了一插件篇自動(dòng)補(bǔ)全前綴官方是這樣說的，也就是說它是一個(gè)自動(dòng)檢測兼容性給各個(gè)瀏覽器加個(gè)內(nèi)核前綴的插件。 上一篇博客講解了webpack環(huán)境的基本，這一篇講解一些更深入的內(nèi)容和開發(fā)技巧?；经h(huán)境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動(dòng)補(bǔ)全css3前綴 autop...

    Tonny 評論0 收藏0

  • vue + typescript 進(jìn)階篇

    摘要：進(jìn)階篇本文是繼新項(xiàng)目起手式之后的進(jìn)階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項(xiàng)目中使用了另外特別注意不推薦在已有項(xiàng)目上強(qiáng)加，因?qū)懛ǖ慕M件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來 vue + typescript 進(jìn)階篇 本文是繼 Vue + TypeScript 新項(xiàng)目起手式 之后的進(jìn)階+踩坑配置，所以推薦先行閱讀前文 ...

    lemanli 評論0 收藏0

  • Webpack Loader 高手進(jìn)階(二)

    摘要：如果函數(shù)沒有返回值的話，那么進(jìn)入到下一個(gè)的函數(shù)的執(zhí)行階段。這也是異步化的一種方式如果執(zhí)行后有返回值，執(zhí)行開始下一個(gè)執(zhí)行以上就是對于在構(gòu)建過程中執(zhí)行流程的源碼分析。 文章首發(fā)于個(gè)人github blog: Biu-blog，歡迎大家關(guān)注~ Webpack 系列文章： Webpack Loader 高手進(jìn)階（一）Webpack Loader 高手進(jìn)階（二）Webpack Loader 高手...

    jackzou 評論0 收藏0

  • Webpack Loader 高手進(jìn)階(三)

    摘要：相關(guān)的內(nèi)容為這樣對于一個(gè)處理的第二階段也就結(jié)束了，通過去攔截不同類型的，并返回新的，跳過后面的的執(zhí)行，同時(shí)在內(nèi)部會(huì)剔除掉，這樣在進(jìn)入到下一個(gè)處理階段的時(shí)候，不在使用的范圍之內(nèi)，因此下一階段便不會(huì)經(jīng)由來處理。 文章首發(fā)于個(gè)人github blog: Biu-blog，歡迎大家關(guān)注~ Webpack 系列文章： Webpack Loader 高手進(jìn)階（一）Webpack Loader 高手...

    ivydom 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。插....

    izhuhaodev 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<