webpack 4系列笔记(2)基本配置

本文介绍如何使用Webpack处理和优化项目中的图片资源,包括使用file-loader、url-loader及image-webpack-loader等工具,实现图片的自动导入、压缩和转换为base64格式,提升网站加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

加载图片与图片优化:

如果不加对图片处理的loader, 就会报错:

vscode中竖排选中如何选中?command+option+ ∨ (向下箭头),则可以按纵向选中项。

shift+ >(向左箭头),则可以按横向选中项。

 

file-loader: 处理文件的导入

module: { 
    rules: [ 
        { 
            test: /\.(png|svg|jpg|gif)$/, 
            use: ['file-loader'] 
        } 
    ] 
}

此时运行打包,发现dist目录多了一个图片文件,另外报错不再出现

图片优化:image-webpack-loader: 可以帮助我们对图片进行压缩和优化

Alt + shift + F 格式化代码

打包之后,发现,图片从6.52KB压缩成3.87KB

 

处理图片成base64:

url-loader: 功能类似于file-loader, 可以把url地址对应的文件,打包成base64的dataURL,可以提高访问效率。

file-loader退出历史舞台

 

{ 
    loader: 'url-loader', // 根据图片大小,把图片优化成base64 
    options: { 
        limit: 10000 
        // 以字节为单位,在限制以下会转成base64,减少一次网络请求; 否则仍然是本地路径url; 
    } 
}

 

limit不宜设置过大,图片很大的时候,转base64也会比较缓慢,加载会变慢;

字体的处理跟图片一样,可以使用url-loader

 

合并两个webpack的js配置文件:

安装webpack-merge

css处理:开发阶段使用style-loader; 生产阶段使用css-loader

js开启sourceMap:

在开发阶段开启:

let devConfig = { 
    mode: 'development', 
    output: { 
        filename: 'main.js', 
        path: path.resolve(__dirname, 'dist') 
    }, 
    devtool: 'inline-source-map', 
    ... 
}

 

监控文件变化,自动编译。使用观察模式:

npx webpack --watch

在package.json中配置:

"scripts": { 
    "watch": "npx webpack --watch --config webpack.dev.js", 
},

运行:npm run watch

但是有个问题,就是每次我们修改 js 或者 css 文件后,要看到修改后的 html 的变化,需要我自己重新刷新页面。如何能不刷新页面,自动更新变化?

 

webpack启动热更新和代理模式:

使用webpack-dev-server和热更新:安装webpack-dev-server

配置:

const webpack = require('webpack');
devServer: { 
    contentBase: './dist', 
    hot: true 
}, 
plugins:[ 
    new webpack.NamedModulesPlugin(), // 更容易查看(patch)的依赖 
    new webpack.HotModuleReplacementPlugin() // 替换插件 
]

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值