webpack進階之loader篇

qylost 發布于2019-08-19 18:33 / 2159人閱讀

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

一、loaders之預處理

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

style-loader 動態把樣式寫入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

栗子

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

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

新建一個名字為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"},
  ]
}

GPU云服務器云服務器進階篇 webrtc進階信令篇 webrtc進階-信令篇之基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79693.html

webpack進階之插件篇

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

Tonny 2019-08-19 18:33 評論0 收藏0
vue + typescript 進階篇

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

lemanli 2019-08-21 17:28 評論0 收藏0
Webpack Loader 高手進階(二)

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

jackzou 2019-08-26 13:35 評論0 收藏0
Webpack Loader 高手進階(三)

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

ivydom 2019-08-23 16:12 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0