webpack进阶之loader篇

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-loadr

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‘},
  ]
}
时间: 2024-10-08 20:20:30

webpack进阶之loader篇的相关文章

webpack进阶之插件篇

一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件. 举个栗子:最新的弹性盒模型flux实际代码: :fullscreen a { display: flex } 插件自动补充后 a { display: -webkit-box; d

webpack进阶用法你都get到了么?

如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpack借鉴了rollup构建工具,从2.0就实现支持tree shaking,其中,到webpack4.0后 通过开启mode:'production'即默认开启. tree shaking原理 DCE(Dead code elimination),即死码消除,编译器原理中,死码消除(Dead cod

【译】SQL Server索引进阶第八篇:唯一索引

原文:[译]SQL Server索引进阶第八篇:唯一索引     索引设计是数据库设计中比较重要的一个环节,对数据库的性能其中至关重要的作用,但是索引的设计却又不是那么容易的事情,性能也不是那么轻易就获取到的,很多的技术人员因为不恰当的创建索引,最后使得其效果适得其反,可以说"成也索引,败也索引".     本系列文章来自Stairway to SQL Server Indexes,翻译和整理后发布在agilesharp和博客园,希望对广大的技术朋友在如何使用索引上有所帮助.   唯一

13.精灵进阶之干活篇

13.精灵进阶之干活篇上 前文曾提及一种创建有纹理的精灵一步到位的方法,即在创建sprite同时也创建了相应地texture,不知客官还有印象.无疑这是一种简便的方法,但往往在实际开发一款复杂游戏时,你需要全盘接管纹理,比如遇到以下几种情况: 多精灵之间共用一个纹理(简单理解成可复用的图片吧,虽然不是很恰当). 假如已经创建完一个有纹理精灵,此时你想更换一个新的纹理给它. 采用一个纹理集合制作精灵动画. 有时候创建纹理的数据并非来自于app bundle,比如从网络下载. 将纹理预(提前)加载到

JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

本文先介绍如何为apache配置多域名,然后再用JSONP(JSON with Padding)来解决JSON的跨域问题. 阅读本文之前,推荐先参阅<JSON进阶第二篇AJAX方式传递JSON数据>. 一.apache配置多域名 在apache的conf目录下找到httpd.conf,然后在该文件最后增加如下内容: # 声明使用虚拟主机过滤规则 NameVirtualHost*:80 #虚拟主机localhost <VirtualHost*:80> ServerName  loca

webpack进阶教程(一)

注:本文重点不是怎样配置webpack.config.js并实现相应的功能,而是通过对比webpack编译前和编译后文件,探究webpack打包后的文件是怎样加载执行的.本文讨论commonJS模块化方案时,webpack的打包工作.为了便于讨论,我们准备了一个非常简单的例子,涉及三个文件,分别是 文件a.js module.exports ={ say:function(){ console.log('A is saying.'); } } 文件b.js module.exports ={ s

入门Webpack,看这篇就够了

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = requir

webpack配置这一篇就够

最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/42e11515c10f git项目地址:https://github.com/gengchen528/webpackSample 更多前端内容可以到:http://www.bloggeng.com/ 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的

转:入门Webpack,看这篇就够了

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = requir