![v2-aacee9797100e73ca3a912e7a30c132f_1440w.jpg?source=172ae18b](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-aacee9797100e73ca3a912e7a30c132f_1440w.jpg?source=172ae18b)
一、webpack中使用css文件:
loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件。
安装loader:
![v2-2816455853d4af5c89de75e4c602cb53_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-2816455853d4af5c89de75e4c602cb53_b.jpg)
官网介绍:
![v2-82f249d9d1fc64aefae3857e03d8f2df_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-82f249d9d1fc64aefae3857e03d8f2df_b.jpg)
安装: cnpm install --save-dev css-loader
![v2-a7dc73eced04e2ad08a4b11f00b68921_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-a7dc73eced04e2ad08a4b11f00b68921_b.jpg)
loader配置:
![v2-d1a50346614e45f9952fa45b1065128b_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-d1a50346614e45f9952fa45b1065128b_b.jpg)
然后再进行打包动作:npm run build
PS:css-loader只负责将css文件进行加载,所以还需要style-loader负责将样式添加到DOM中,让css文件起作用,通过cnpm install style-loader --save-dev 安装环境
// css-loader只负责将css文件进行加载
// style-loader 负责将样式添加到DOM中
// 使用多个loader时,是从右到左进行执行的
然后通过npm run build 打包,运行,测试成功:
![v2-d7bccc90632cca74f7eed42cd6a57a22_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-d7bccc90632cca74f7eed42cd6a57a22_b.jpg)
二、webpack-less的使用
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
安装less环境:cnpm install --save-dev less-loader less
![v2-9d3dc1c1bed8b9c701960f007d70572b_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-9d3dc1c1bed8b9c701960f007d70572b_b.jpg)
然后在webpack.config.js配置less环境:
![v2-ec5d7c21bf3b09b7c237bca42265e48e_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-ec5d7c21bf3b09b7c237bca42265e48e_b.jpg)
然后重新打包,运行,测试成功:
![v2-6f59ff28575931c2a479d24073dfc981_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-6f59ff28575931c2a479d24073dfc981_b.jpg)
PS:安装过程中,高版本的在打包时会报错,建议还是与其他组件配套的版本进行安装,我这边是安装了cnpm install --save-dev less-loader@4.1.0 less
三、webpack的图片使用
图片处理,需要用到url-loader 像 file loader 一样工作,但如果文件小于限制,可以返回 data URL
![v2-f778dbeeb0d3bc61f921f3e030522d30_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-f778dbeeb0d3bc61f921f3e030522d30_b.jpg)
安装环境:cnpm install --save-dev url-loader@4.1.0
![v2-3d05edbc34b76c6e7cc957154981fd7c_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-3d05edbc34b76c6e7cc957154981fd7c_b.jpg)
配置环境:
![v2-3ef2bc3cdc9c55f0a1530ad53ac15d01_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-3ef2bc3cdc9c55f0a1530ad53ac15d01_b.jpg)
PS:当加载的图片大小于limit时,会将图片编译成base64字符串形式;
如果加载的图片大于limit时,则需要file-loader的环境进行加载,否则打包时会报错,此时直接安装相关环境即可,不需要配置:cnpm install --save-dev file-loader@4.1.0 。
但是通过file-loader打包的url文件,系统会去打包文件夹dist目录下找相关文件,需要指定加载图片的位置,所以在配置文件中增加一个属性:publicPath: 'dist/' //只要打包涉及到URL的文件,则自动在路径前面增加一个dist/的路径:
![v2-3d3262e7a8f2f547d58e6d30fbc72fd8_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-3d3262e7a8f2f547d58e6d30fbc72fd8_b.jpg)
重新打包,测试运行成功(已经添加背景图片):
![v2-c8fed93e1b500885d14db78de6906458_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-c8fed93e1b500885d14db78de6906458_b.jpg)
file-loader的情况:
![v2-5ceeb739a97cd84bf94edb6a5a050d39_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-5ceeb739a97cd84bf94edb6a5a050d39_b.jpg)
PS:通过file-loader打包的图片,是一个32位hash值,目的是为了防止名字重复:
![v2-933ca39b50faa24296f9b2f81cb7b7d1_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-933ca39b50faa24296f9b2f81cb7b7d1_b.jpg)
为了使名字规范,可以在配置文件options进行配置,图片名字再拼接一个8位的hash值:
name: 'img/[name].[hash:8].[ext]' // 注意格式
重新打包后则生成一个原来名字拼接上一个8位hash值名字的图片:
![v2-d256ff20c2233d1bcf3b03e9a9de6299_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-d256ff20c2233d1bcf3b03e9a9de6299_b.jpg)
运行后的结果:
![v2-7fb1c60d56808b8cd35146a409129c74_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-7fb1c60d56808b8cd35146a409129c74_b.jpg)
————————————————
版权声明:本文为CSDN博主「大数据时代」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
Vue学习笔记之Webpack中css、less、图片等文件处理_医疗数据-CSDN博客blog.csdn.net![v2-60f387bd2a60b414b8d19bb9e4973907_ipico.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=996d6bd1-462e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-60f387bd2a60b414b8d19bb9e4973907_ipico.jpg)