前端模块加载工具Webpack之loader

     764     10月-28,16    

前端社区有许多预处理器供我们使用。我们可以使用这些预处理器做一些强大的事情,大家都听过的就是CoffeeScript和Sass了。我们以前要编译这些预处理器,就是用gulp进行编译。但是我们对这些文件处理其实也挺繁琐的,webpack可以一次性解决!

Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。

文/zhangwang(简书作者)
原文链接:http://www.jianshu.com/p/42e11515c10f
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

loader 特性

loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader)
loaders 可以同步也可以异步
loaders在nodejs下运行并且可以做一切可能的事
loader接受参数,可用于配置里
loaders可以绑定到extension/RegExps 配置
loaders 可以通过npm发布和安装
正常的模块儿可以到处一个loader除了
loaders 可以访问配置
插件可以给loaders更多的特性
loaders可以释放任意额外的文件

一切皆模块

Webpack有一个不可不说的优点,它把所有的文件都可以当做模块处理,包括你的JavaScript代码,也包括CSS和fonts以及图片等等等,只有通过合适的loaders,它们都可以被当做模块被处理。

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

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

 

loaders之CSS 预处理

webpack提供两个工具处理样式表,css-loaderstyle-loader,二者处理的任务不同,css-loader使你能够使用类似@importurl(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

文/zhangwang(简书作者)
原文链接:http://www.jianshu.com/p/42e11515c10f
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
  • css-loader 处理css中路径引用等问题
  • style-loader 动态把样式写入css
  • sass-loader scss编译器
  • less-loader less编译器
  • postcss-loader scss再处理

配置示例:

:感叹号的作用在于使同一文件能够使用不同类型的loader

CSS module

在过去的一些年里,JavaScript通过一些新的语言特性,更好的工具以及更好的实践方法(比如说模块化)发展得非常迅速。模块使得开发者把复杂的代码转化为小的,干净的,依赖声明明确的单元,且基于优化工具,依赖管理和加载管理可以自动完成。
不过前端的另外一部分,CSS发展就相对慢一些,大多的样式表却依旧是巨大且充满了全局类名,这使得维护和修改都非常困难和复杂。

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

 

loaders之 js处理

  • babel-loader
  • jsx-loader

新建一个名字为.babelrc的文件

webpack.config.js配置

loaders之 图片处理

url-loader

webpack.config.js配置

loaders之 文件处理

file-loader

webpack.config.js配置

loaders之 json处理

json-loader

webpack.config.js配置

loaders之 html处理

raw-loader

webpack.config.js配置

你需要先 登录 才能发表评论.