Vue学习笔记之Webpack中css、less、图片等文件处理

一、webpack中使用css文件：

loader是webpack中一个非常核心的概念，去转化webpack不能转化或打包的文件。

安装loader：

官网介绍：

安装： cnpm install --save-dev css-loader

loader配置：

然后再进行打包动作：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 打包，运行，测试成功：

 

二、webpack-less的使用

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

安装less环境：cnpm install --save-dev less-loader less

然后在webpack.config.js配置less环境：

然后重新打包，运行，测试成功：

PS：安装过程中，高版本的在打包时会报错，建议还是与其他组件配套的版本进行安装，我这边是安装了cnpm install --save-dev [email protected] less

 

三、webpack的图片使用

图片处理，需要用到url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

安装环境：cnpm install --save-dev [email protected]

配置环境：

PS：当加载的图片大小于limit时，会将图片编译成base64字符串形式;

如果加载的图片大于limit时，则需要file-loader的环境进行加载，否则打包时会报错，此时直接安装相关环境即可，不需要配置：cnpm install --save-dev [email protected] 。

但是通过file-loader打包的url文件，系统会去打包文件夹dist目录下找相关文件，需要指定加载图片的位置，所以在配置文件中增加一个属性：publicPath: 'dist/' //只要打包涉及到URL的文件，则自动在路径前面增加一个dist/的路径：

重新打包，测试运行成功（已经添加背景图片）：

file-loader的情况：

PS：通过file-loader打包的图片，是一个32位hash值，目的是为了防止名字重复：

为了使名字规范，可以在配置文件options进行配置，图片名字再拼接一个8位的hash值：

name: 'img/[name].[hash:8].[ext]' // 注意格式

重新打包后则生成一个原来名字拼接上一个8位hash值名字的图片：

运行后的结果：