《基于 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$/,
                  // 必须加上，否则在编译过程中报错 The code generator has deoptimised the styling
                  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]',
                  }
              },
          ]
      },
  }