《基于 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]',
                    }
                },
            ]
        },
    }
相关推荐
liangshanbo12152 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15885 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_5 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD5 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~5 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15886 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫6 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo6 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li7 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐7 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine