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

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

你可能感兴趣的:(Webpack,vue.js,前端,javascript)