《基于 Vue 组件库 的 Webpack5 配置》2.模块规则 module.rule

配置 module.rules ,创建模块时,匹配请求的规则数组;

  • 可参考 webpack5 指南-管理资源

  • vue 可参考上述配置;

  • js 使用 webpack babel-loader

  • css 参考 webpack 加载 CSS。注意style-loadervue-style-loader 选一个即可,两者的功能基本一致,只是 vue-style-loader 可用于服务端渲染 SSR;

  • stylus 参考 webpack stylus-loader。可使用 插件 MiniCssExtractPlugin 提取样式到单独的文件,需额外安装 npm i mini-css-extract-plugin -D

  • png/svg/jpg 参考 webpack 加载图像,注意 type 的配置 资源模块 asset/resource (强烈建议认真阅读此链接)

  • ttf/woff/woff2 参考 webpack 加载字体,注意 type 的配置 资源模块 asset/resource (强烈建议认真阅读此链接)

  • package.json 的配置如下

    js 复制代码
    // 需安装,可将CSS提取到单独的文件:
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        //与 style-loader 功能类似,只是 vue-style-loader 可用于服务端渲染
                        // "vue-style-loader", 
                        "css-loader"
                    ]
                },
                {
                    test: /\.styl(us)?$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'stylus-loader',
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                    generator: {
                        // publicPath: 'assets/imgs/', // https://webpack.docschina.org/configuration/module#rulegeneratorfilename
                        filename: 'imgs/[hash][ext]',
                    }
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                    generator: {
                        // publicPath: 'assets/fonts/',
                        filename: 'fonts/[hash][ext]',
                    }
                },
            ]
        },
    }
相关推荐
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j1 小时前
spark
javascript·数据库·spark
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友6 小时前
什么是断言?
前端·后端·安全
FIN66687 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4957 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1247 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树7 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端