webpack (二)loader的使用

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

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

1、require()方法
作用:引用模块
webpack (二)loader的使用_第1张图片
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
webpack (二)loader的使用_第2张图片
webpack (二)loader的使用_第3张图片
(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.在命令行中配置

你可能感兴趣的:(webpack,webpack)