webpack 处理字体_webpack处理less、图片和字体

1. 处理 less 文件

步骤：

1 安装包： npm i -D less-loader less

npm i -D style-loader css-loader

2 在 webpack.config.js 的 module 中添加一个规则

2. 处理图片文件?url-loader 或者 file-loader

file-loader 对图片进行重命名，然后，加载图片

1 安装： npm i -D file-loader

2 在 webpack.config.js 中的 module 里面添加一个rules

自己写的路径为：../imgs/a.jpg

文件路径被重命名为： 1ddb3677198212f7fea7ca4b9de18dcb.jpg

原理：

MD5 加密算法(消息摘要算法) 通常就是 32 位

对于同一个文件或者字符，不管使用 md5 处理过多少次，那么，得到的 32位字符串都是相同的

在 file-loader 中，使用 md5 处理后，对于同一张不同名称的图片，只会加载一次，而如果不进行 md5 处理，就会加载两次，而这两张图片实际上就是同一张，实际上加载一次就可以了，这样的话，可以达到减少网络请求，加快网站的加载速度。

MD5 在项目中，一般可以用来进行密码加密处理

用户名 + 密码 ====> md5( 密码 ) ===> 1ddb3677198212f7fea7ca4b9de18dcb => 存储到数据库中

推荐使用 url-loader

1 安装： npm i -D url-loader

最好将 file-loader 一起安装

2 在 webpack.config.js 中，只要将 file-loader 替换为 url-loader 就可以了

url-loader 默认情况下，会将图片处理为base64编码的格式，base64 适合处理小图标，直接内嵌在页面中，减少了请求次数

data:image/png;base64, ....

.babelrc

{

"presets": ["env", "stage-2"]

}

babel 是一个JS编译器，能够将最新的JS语法转化为浏览器能够识别的代码

?npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-stage-2

3. webpack.config.js

// 注意: 不要使用 ES6 中的模块化语法 import/export

const path = require('path')

// const webpack = require('webpack')

// 导入html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 处理Vue单文件组件的插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

// 入口

entry: path.join(__dirname, './src/main.js'),

// 出口

output: {

path: path.join(__dirname, './dist'),

filename: 'bundle.js'

},

// 模式

mode: 'development',

devServer: {

// 自动打开浏览器

open: true,

// 修改端口号

port: 3000

// 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面

// 第一步:

// hot: true

},

// 配置loader

module: {

rules: [

// test 是一个正则, 用来匹配加载文件的路径

// 比如: import './css/index.css'

// use 表示使用哪个loader来处理这个类型的文件

// 注意: 有顺序!!!

// 处理过程是: 从右往左

// css-loader 读取CSS文件,将其转化为一个模块

// style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head

{ test: /\.css$/, use: ['style-loader', 'css-loader'] },

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

// 处理图片

// {

// test: /\.(jpg|jpeg|png|gif)$/,

// use: 'file-loader'

// },

{

test: /\.(jpg|jpeg|png|gif)$/,

// use: 'url-loader'

use: [

{

loader: 'url-loader',

options: {

// 单位：字节， 8Kb

// 如果图片的大小比 8kb 小，图片就会被处理为 base64

// 如果图片的大小大于或等于 8kb ，url-loader会自动调用 file-loader 来对图片重命名处理

// limit: 8192

limit: 49877

}

}

]

},

// 处理字体

{

test: /\.(eot|svg|ttf|woff|woff2|otf)$/,

// use: 'file-loader'

use: 'url-loader'

},

// 配置babel

{

test: /\.js$/,

use: 'babel-loader',

// 排除掉不需要 babel 处理的文件路径

// 一般，都会将 node_modules 排除掉

exclude: /node_modules/

},

// 处理Vue单文件组件

{

test: /\.vue$/,

use: 'vue-loader'

}

]

},

plugins: [

// 第二步:

// new webpack.HotModuleReplacementPlugin(),

new HtmlWebpackPlugin({

// 指定模板文件路径

template: path.join(__dirname, 'index.html')

}),

new VueLoaderPlugin()

]

}

?

?