1. loader 简介
由于 webpack 打包入口目前只配置了一个 index.JS 文件, 那么其他需要被打包的文件都必须通过模块化方式引入该文件才行, 而默认情况下, 引入的文件必须是 JS 文件(如项目里添加的 index.JS).
那么其他文件类型该如何进行打包呢? 这时我们就要用到 webpack 中所提供的各种 loader, 它就是专门用于处理除 JS 文件之外的其他格式文件的编译, 提取, 合并, 打包等.
其中 CSS 文件的打包需要用到 style-loader 和 CSS-loader 这两个依赖包, style-loader 用于将打包后的 CSS 代码 < style > 标签形式添加到页面头部, CSS-loader 用于加载 CSS 文件.
2, 安装
NPM i CSS-loader style-loader -D
3, 配置 webpack.conf.JS
- //jpg,gif,PNG,CSS.... 所以文件都需要单独的 loader
- // 通过 loader 加载文件 转换未 webpack 能够识别的 moudle
- // 模块对象
- module:{
- // 规则
- rules:[
- {
- // 正则匹配所有以. CSS 结尾的文件
- test:/.CSS$/,
- // 使用 CSS-loader 和 style-loader 依次对 CSS 文件进行处理
- // 按照数组中从后往前的顺序
- use:[devMode?'style-loader','css-loader',]
- },
- ]
- },
4,html 文件和 style.CSS
第一步: src 目录中编辑 index.HTML
第二步: 手动在 src 目录建 style.CSS 文件再编辑
编辑
第三步: 在 src 目录 index,JS 中引入 style.CSS
5, 运行
运行自己自定义的脚本命令, 然后自动打开了网页
NPM run dev
可以看到自己刚刚编写的 HTML 和 CSS 样式
如果要重新修改样式等的东西, 只需要到 CSS 文件里修改在点击保存 热更新自动更新(不需要重新打包)
二, 图片打包
图片打包关键要用到 file-loader 或 url-loader, 其中 url-loader 与 file-loader 功能基本一致, 只不过 url-loader 能将小于某个大小的图片进行 base64 格式的转化处理.
1,CSS 中写图片
我现在在 src 目录下新增一个 images 文件夹, 再在 images 中添加一张图片 "ccc.png". 然后我在 style.CSS 中添加以下代码:
这样直接打包, 肯定是会报错的 下图写着图片不能被解析, 我们需要用一个装一个 loader 插件, 来处理图片的解析.
2, 安装
NPM i file-loader -D
3, 配置 webpack.conf.JS
- {
- test:/\.(jpg|PNG|jpeg|gif)$/,
- use:['file-loader'],// 其实对于只有单个 loader 的, 可以将其简化 loader:'file-loader',
- options:{
- //name 属性其实就是图片打包后的路径, 其中包括图片名 ([name]) 和图片格式([ext]).
- name:'./images/[name].[hash].[ext]'
- }
- },
4, 运行
NPM run build dist 目录下会打包一个 images 文件夹
NPM run dev :
这样图片已经成功写进网页里了.
总结
当我们配置 watch 为 true 进行打包后, Webpack 会一直处于监听状态, 然而当更改 webpack.config.JS 后我们仍需要重新进行打包操作, 这时我们只需在控制台简单的按下 Ctrl+C 后根据提示输入字母 y 回车确定即可成功退出监听状态.
loader 解决了在打包过程中打包图片, 样式, 视频, 音频等无法解析的问题, 进一步解决了我们的问题.
来源: https://www.cnblogs.com/xym0996/p/12040435.html