webpack 4系列笔记（2）基本配置_webpack 4系列笔记(2)loader-优快云博客

本文介绍如何使用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() // 替换插件 
]