当前位置: 首页> 教育> 大学 > webpack--处理资源

webpack--处理资源

时间:2025/7/10 8:43:45来源:https://blog.csdn.net/nibabaoo/article/details/141819186 浏览次数:0次

webpack.config.js中进行配置 

const path = require('path')
module.exports = {// 入口entry: './src/main.js',// 输出output: {// 文件的输出路径path: path.resolve(__dirname, 'dist'),// 入口文件打包输出的文件名filename: 'js/main.js',// 自动清空上次打包结果 原理:在打包前,将path整个目录内容清空 再进行打包clean: true,},// 加载器module: {rules: [// loader的配置// css-loader 处理css文件{test: /\.css$/, // 只检测xxx文件use: [// 执行顺序从右到左(从下到上)'style-loader', // 将js中css通过创建style标签的样式添加到html中生效'css-loader', // 将css资源编译成common.js的模块到js中],},// less-loader 处理less文件{test: /\.less$/, // 只检测less文件use: ['style-loader', 'css-loader', 'less-loader'],},// sass-loader 处理scss文件{test: /\.s[ac]ss$/,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},// stylus-loader 处理styl文件{test: /\.styl$/,use: ['style-loader', 'css-loader', 'stylus-loader'], // 将styl文件编译为 CSS},// 处理图片{test: /\.(png|jpe?g|gif|webp|svg)$/,// 会转base64type: 'asset',parser: {dataUrlCondition: {// 小于10kb的图片转base64// 优点:减少请求数量 缺点:体积会更大maxSize: 10 * 1024, // 10kb,},},generator: {// hash:5 hash值取前5位数(打包后的图片名称)filename: 'images/[hash:5][ext][query]',},},// 处理字体文件{test: /\.(ttf|woff2?)$/,// 不会转base64type: 'asset/resource',generator: {filename: 'font/[hash:5][ext][query]',},},// 处理其他资源{test: /\.(mp3|mp4|avi)$/,// 不会转base64type: 'asset/resource',generator: {filename: 'media/[hash:5][ext][query]',},},],},// 插件plugins: [// plugin的配置],// 模式mode: 'development',
}

关键字:webpack--处理资源

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: