配置 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#rulegeneratorfilenamefilename: 'imgs/[hash][ext]',}},{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: 'asset/resource',generator: {// publicPath: 'assets/fonts/',filename: 'fonts/[hash][ext]',}},]},
  }