webpack处理其他资源09--webpack入门学习

处理其他资源

开发中可能还存在一些其他资源，如音视频等，我们也一起处理了

1. 配置

const path = require('path')
module.exports = {// 入口entry: './src/main.js',// 出口output: {path: path.resolve(__dirname, 'dist'),filename: 'static/js/main.js',// 指定文件名clean: true,// 打包前清除目录},// 加载器module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},{test: /\.styl$/,use: ["style-loader","css-loader","stylus-loader"],// 将 Stylus 文件编译为 CSS},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 150 * 1024 // 小于15kb的图片会被base64处理}},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:16][ext][query]",},},{test: /\.(ttf|woff2?|mp4|mp3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},],},// 插件plugins: [],// 模式mode: "development"
}

就是在处理字体图标资源基础上增加其他文件类型，统一处理即可

2. 运行指令

npx webpack

打开 index.html 页面查看效果