Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。

Loader 可以在 require() 引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。

下面的例子是这篇文章的续篇:webpack前端构建工具学习总结(一)之webpack安装、创建项目

1.在hello.js中通过require引用style.css,执行webpack hello.js hello.bundle.js,报错如下图:

报错提示需要一个loader转换器来处理css样式

2.输入命令:npm install css-loader style-loader --save-dev,来安装css的loader转换器和style的loader转换器

安装完成后,输入命令:webpack hello.js hello.bundle.js,进行编译hello.js

运行发现仍然发现报错

3.查看引入style.css的地方,webpack只能处理javascript模块,处理css需要借助于loader转换器

在 require() 引用模块的时候添加loader转换

那么在require引入style.css文件时,就需要css-loader转换。require('css-loader!./style.css');

在进行编译打包hello.js,编译打包成功

查看hello.bundle.js文件,多出了css样式这一块,并且css样式为一独立模块

4.在项目目录下新建一个index.html,并且引入hello.js打包后的hello.bundle.js

5.修改hello.js,运行hello()函数,接着再编译一次hello.js到hello.bundle.js

6.运行index.html

页面上弹出“hello world!”

7.但是我们发现页面的背景色并没有变成ccc的样式,要想让css样式生效,还需要在require引入css的时候使用style-loader

require('style-loader!css-loader!./style.css');

编辑完后再用webpack编译打包

8.刷新index页面,页面变成了ccc的背景色

发现style.css中的样式被使用style标签插入到了head里面,这是由style-loader实现的

css-loader是允许webpack识别.css的文件

style-loader是将webpack识别完的css文件中的内容,在编译完运行文件的时候,将这些css用style标签包起来嵌在head内

上面的例子讲述的都是在require引入模块的时候添加的loader转换,还有一种方式就是在命令行中添加loader,其他和上面讲述一样

在命令行中添加loader

在命令行中输入命令:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'(git bash中执行相当于linux,如在windows下的cmd估计要将单引号换成双引号)

去掉hello.js中require时添加的loader依赖,并将上面的命令进行编译

每次修改完文件进行编译时都需要写命令,很是繁琐,在命令最后加上--watch,当文件有变化时,就会自动编译

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

当修改hello.js文件保存后,就会看到命令行上已经重新编译

刷新index.html就可以看到修改后的内容了

webpack其他命令介绍:

--progress:当前打包的进度条

--display-modules:打包的模块,依赖什么而打包也会列出来

--display-reasons:打包模块的原因,因为什么打包

输入完整命令:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons --watch

当检测到文件有变化时进行编译,编译输出包括打包进度、打包模块、打包原因

这个博客写的也很详细,值得学习:http://blog.csdn.net/keliyxyz/article/details/51579078

总结

loader的安装:npm install xxx-loader -save-dev

loader的三种用法:

1.require()(本文均由讲述)

2.在配置文件webpack.config.js中通过module.loaders进行配置()

3.在命令行中配置(本文均由讲述)

到这里,loader的使用已经开始入门了!

webpack前端构建工具学习总结(二)之loader的使用的更多相关文章

  1. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  4. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  5. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  6. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  7. FIS构建工具学习(一)

    一.FIS是什么 在做项目的时候,用到部门内部前端人员开发的fiskit构建工具,经过这次项目基本把它的配置弄清楚了,fiskit构建工具是基于FIS的,所以自己也准备学习FIS,以便更好的理解. 后 ...

  8. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  9. Gulp, 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

随机推荐

  1. Android Market google play store帐号注册方法流程 及发布应用注意事项

    Android Market google play store帐号申请 注册方法流程 在 Google Play 中发布软件之前,您需要完成以下三项工作: 创建开发人员个人资料 接受开发人员分发协议 ...

  2. scrapy-redis源码解读之发送POST请求

    1 引言 这段时间在研究美团爬虫,用的是scrapy-redis分布式爬虫框架,奈何scrapy-redis与scrapy框架不同,默认只发送GET请求,换句话说,不能直接发送POST请求,而美团的数 ...

  3. flask-sqlalchemy中 backref lazy的参数实例解释和选择

    官方文档:http://docs.sqlalchemy.org/en/rel_1_0/orm/basic_relationships.html#relationship-patterns 最近在学习到 ...

  4. 从零开始安装 Ambari (1) -- 安装前的准备工作

    Ambari 没有简单的 .tar.gz 结尾的包(反正我找到).apache 官网提供的安装方法,是要下载源码,自己编译成安装包安装.说明文档还不够细.编译的时候是用 maven,照理来说不应该会失 ...

  5. 二维偏序 tree

    tree(二维偏序) 最近接触到一些偏序的东西. 传统线段树非叶子节点的划分点mid=(l+r)/2,但小R线段树mid是自己定的.但满足l<=mid<r,其余条件同原来线段树.那么不难发 ...

  6. sap smartform 打印乱码问题

    在smartforms打印的时候会遇到中英文结合的form 有时候系统会处理时出现乱码   有时不会  不知道是系统的事情还是配置的事情 现在是我的解决办法  因为是中英文结合 在中文环境建立form ...

  7. 如何在html文件中导入header、footer等

    1.include是php函数,所以确实需要转化成.php文件--(其实除了用php,html都有自带的引入方法)2.html转化为php文件很简单,直接改一下后缀名就可以了--(如:index.ht ...

  8. 项目 08 WebSocket

    项目班 08 WebSocket app.py 更新 添加两个路由 handlers = [ ('/', main.IndexHandler), ('/explore', main.ExploreHa ...

  9. @GeneratorValue与@GenericGenerator注解使用心得

    参考博主们的 http://blog.csdn.net/tianxiezuomaikong/article/details/64930151

  10. ssl加密

    握手前使用非对称加密, 握手后使用对称加密 前期握手就是用来协商对称加密算法的