版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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 适合处理小图标,直接内嵌在页面中,减少了请求次数
扫描二维码关注公众号,回复:
7193806 查看本文章
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()
]
}