Loaders

鼎鼎大名的Loaders登场了!

1、什么是loaders

  Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,

  比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言,

  合适的Loaders可以把React的JSX文件转换为JS文件。

2、loaders的配置参数

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:

  • test:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)

3、loader的安装

  //安装可以装换JSON的loader
  npm install --save-dev json-loader
4、webpack.config.js配置文件
 
module.exports = {
   devtool: 'eval-source-map',
   entry: __dirname + "/app/main.js",
   output: { path: __dirname + "/public", filename: "bundle.js" },
 
   module: {//在配置文件里添加JSON loader
     loaders: [
          {
             test: /\.json$/,
             loader: "json"
          }
         ]
  },
  如果这种写法报错 我们可以尝试 第二种方案
  module: {
  rules: [
  {
  test: /\.json$/,
   use: 'json-loader'
  }
  ]
 },
   devServer: {
         contentBase: "./public",
         historyApiFallback: true,
         inline: true
        }
}

5、创建带有问候信息的JSON文件(命名为config.json)  在main.js 和 Greeter.js 目录下创建

//config.json
{
"greetText": "Hi there and greetings from JSON!"
}
6、更新后的Greeter.js

  var config = require('./config.json');

  module.exports = function() {
   var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
  };

注意:Loaders很好,不过有的Loaders使用起来比较复杂,比如说Babel。

作者:zhangwang
链接:http://www.jianshu.com/p/42e11515c10f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



WebPack-Loader的更多相关文章

  1. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  2. 如何开发webpack loader

    关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...

  3. 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...

  4. 案例实战之如何写一个webpack loader

    通过以下几个实例掌握webpack loader的写法 1.写一个多语言替换的loader 在index.js在页面上插入了一个{{title}}文本,我们需要在打包的时候将其替换成对应的多语言 fu ...

  5. 发布一个npm包(webpack loader)

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  6. webpack loader & pulgin

    webpack loader & plugin https://webpack.js.org/concepts/loaders/ https://webpack.js.org/concepts ...

  7. webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...

  8. [webpack]——loader配置

    前言 当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则. 看一下基础实例: module.exports ...

  9. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  10. webpack loader 生成虚拟文件的方案

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 使用 webpack 的时候,难免需要写一些 loader,接着就会遇到一个很纠结的问题.该 loade ...

随机推荐

  1. 系统自带vim命令学习教程

    [环境] [干货分享] vim或者vi命令在很多linux环境中自带一款学习教程,其教程说明语言还是随系统变化. 输入vimtutor这个命令会打开一款学习神器. 打开之后显示如下,vimtutor一 ...

  2. TCP/IP、HTTP、HTTPS、HTTP2.0

    TCP/IP.HTTP.HTTPS.HTTP2.0 HTTP,全称超文本传输协议(HTTP,HyperText Transfer Protocol),是一个客户端和服务器端请求和应答的标准(TCP), ...

  3. mybatis框架(5)---动态sql

    那么,问题来了: 什么是动态SQL? 动态SQL有什么作用? 传统的使用JDBC的方法,相信大家在组合复杂的的SQL语句的时候,需要去拼接,稍不注意哪怕少了个空格,都会导致错误.Mybatis的动态S ...

  4. C 标准I/O库粗略实现

    本文同时发表在 https://github.com/zhangyachen/zhangyachen.github.io/issues/123 写一下fopen/getc/putc等C库的粗略实现,参 ...

  5. MySQL Group Replication 动态添加成员节点

    前提: MySQL GR 3节点(node1.node2.node3)部署成功,模式定为多主模式,单主模式也是一样的处理. 在线修改已有GR节点配置 分别登陆node1.node2.node3,执行以 ...

  6. 线上平滑升级nginx1.12

    .下载相关包,需要和之前用到的依赖包保持一致 wget http://nginx.org/download/nginx-1.12.2.tar.gz wget https://bitbucket.org ...

  7. ES6 二进制数组

    二进制数组(ArrayBuffer对象.TypedArray视图和DataView视图)是JavaScript操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011年2月发布),ES6将 ...

  8. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  9. uEditor富文本编辑器

    在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置. 我采用的方式:----不建议全部取消严格模式,因为一些插件必须要再严格模式才能运行的 对UEditor的严格模式报错文件,取 ...

  10. 解决Windows和Linux使用npm打包js和css文件不同的问题

    1.问题出现 最近公司上线前端H5页面,使用npm打包,特别奇怪的是每次打包发现css和js文件与Windows下打包不一致(网页使用Windows环境开发),导致前端页面功能不正常. 2.问题排查 ...