配置 module.rules ，創(chuàng)建模塊時，匹配請求的規(guī)則數(shù)組；

• 可參考 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 的配置如下文章來源地址http://www.zghlxwxcb.cn/news/detail-672415.html

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

到了這里，關(guān)于《基于 Vue 組件庫 的 Webpack5 配置》2.模塊規(guī)則 module.rule的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！