《基于 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]',
                    }
                },
            ]
        },
    }
相关推荐
10年前端老司机3 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js