webpack (二）loader的使用

webpack前端构建工具—loader的使用

webpack本身只能处理javascript模块，如果处理其它类型的文件，就需要使用loader进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。

1、require（）方法
作用：引用模块

3、loader的使用方式
以向应用中添加css文件为例：如果在应用中添加css文件，就需要用到css-loader和style-loader。css-loader遍历css，然后找到url（）表达式处理他们，style-css把原来的css代码插入页面中的一个style标签中。
（1）首先安装安装 css-loader 和 style-loader(全局安装需要参数 -g)
命令： cnpm install css-loader style-loader -g --save -dev 全局安装css的loader转换器和style的loader转换器,并增加依赖（–save-dev）
注：使用淘宝镜像安装npm i -g cnpm --registry=https://registry.npm.taobao.org（原因：尝试直接npm直接安装，但安装失败）
（2）使用方式1：Loader 在 require() 引用模块的时候添加
创建一个css文件

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!
格式：require("!style=loader!css-loader!./文件名.css"）

require("!style-loader!css-loader!./style.css)

用webpack进行资源打包
在项目根目录下进行打包：webpack runoob1.js -o bundle.js


(2）** 使用方式2：在命令行中添加loader**
根据模块类型（扩展名）来自动绑定需要的 loader。 将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ：require（）时就不用添加loader依赖

在命令行中输入语句： webpack runoob1.js bundle.js --module-bind ‘css=style-loader!css-loader’ 进行编译
方式3在webpack的配置学习

4、监听模式
在命令最后加上–watch，当文件有变化时，就会自动编译
webpack runoob1.js bundle.js --module-bind ‘css=style-loader!css-loader’ --watch

5、webpack其他命令介绍：
–progress：当前打包的进度条
–display-modules：打包的模块，依赖什么而打包也会列出来
–display-reasons：打包模块的原因，因为什么打包
输入完整命令：webpack hello.js hello -o bundle.js --module-bind ‘css=style-loader!css-loader’ --progress --display-modules --display-reasons --watch

6、总结
loader的安装：npm install xxx-loader （–save-dev）
loader的三种用法：
1.require()
2.在配置文件webpack.config.js中通过module.loaders进行配置（）
3.在命令行中配置