webpack5零基础入门-7webpack修改输出文件目录

1.修改output中的path后打包

复制代码
 path: path.resolve(__dirname, 'dist/js'),//所有文件的输出目录

可以看到dist目录下多了个js目录

但所有文件都在js目录中

我们想要的是根据不同的资源进行分类很显然这样不行

从这里可以看出path是所有文件的输出目录

2.修改output中的filename后打包

复制代码
 filename: 'js/dist.js'//入口文件输出文件名

可以看到dist文件被放到了js文件夹

filename是入口文件打包后输出的文件名

3.修改图片打包后的存放路径

复制代码
{
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图标转base64,减少请求数量
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    //输出图片名称
                    filename: 'static/imgs/[hash][ext][query]'
                }
            }

配置generator属性中的filename即可定义输出图片的名称

可以看到打包后图片文件都到img是文件夹中了

可以看到文件名变成10位了

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui