webpack处理less、图片和字体

1. 处理 less 文件

步骤：
1 安装包： npm i -D less-loader lessnpm i -D style-loader css-loader
2 在 webpack.config.js 的 module 中添加一个规则

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

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

 1 安装： npm i -D file-loader2 在 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},// 配置loadermodule: {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: 8192limit: 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()]
}