Webpack打包静态资源之图片篇

最新推荐文章于 2024-10-10 11:37:54 发布

Meskjei

最新推荐文章于 2024-10-10 11:37:54 发布

阅读量1.3k

点赞数

分类专栏： Webpack 前端文章标签： Webpack 静态资源

本文链接：https://blog.csdn.net/hjc256/article/details/100069938

版权

本文介绍了如何在Webpack中处理静态资源，特别是图片资源。通过配置`output`字段的`publicPath`来更改图片输出目录，使用`url-loader`配合`limit`参数，确保小图片以base64形式内联，而大图片保持原样，优化项目加载效率。

摘要由CSDN通过智能技术生成

文章目录

占位符
更改输出目录
url-loader

占位符

我们知道，在打包图片的时候，名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢？同样的，可以在webpack.config.js里配置。

const path = require('path');

module.exports ={
   
    entry: './src/index.js',
    output: {
   
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
   
        rules: [
            {
   
                test: /\.(webp|jpg|png)$/,