《基于 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]',
                    }
                },
            ]
        },
    }
相关推荐
前端开发与ui设计的老司机3 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人5 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景27 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互