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

AvatarGiser2023-08-27 17:35

配置 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 的配置如下

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]',
                }
            },
        ]
    },
}

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

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