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

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

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

• vue 可参考上述配置；

• js 使用 webpack babel-loader；

• css 参考 webpack 加载 CSS。注意style-loader 和 vue-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 的配置如下

  // 需安装，可将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]',                }            },        ]    },}

来源地址：https://blog.csdn.net/sinat_31213021/article/details/132497085