如何为Blazor应用打包压缩静态资源及整合npm模板包？

近期研究Blazor，用VS模板创建了示例应用。为添加样式，引入了Material Dashboard模板，将其静态资源复制到wwwroot文件夹，在_Host.cshtml中引入所需文件后运行正常。

现在wwwroot文件夹文件过多（结构截图：），有两个疑问：

1. 能否打包压缩wwwroot中的内容？尝试过webpack配置，但不知道怎么在_Host.cshtml中引入输出文件。
2. 该模板也可通过npm获取，知道Blazor中能使用npm，能不能通过npm获取包后用webpack压缩并输出到wwwroot？如果可以，怎么和Blazor应用整合？

问题1：打包压缩wwwroot现有内容并在_Host.cshtml中引入 #

步骤1：配置webpack #

在项目根目录创建webpack.config.js，配置入口、输出路径和压缩规则：

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  entry: {
    // 配置你的JS入口文件，比如wwwroot中的自定义JS
    app: './wwwroot/js/custom.js',
    // 若有第三方依赖，可单独拆分
    // vendor: './wwwroot/js/vendor.js'
  },
  output: {
    filename: 'js/[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'wwwroot/dist'),
    clean: true, // 每次构建清空dist文件夹
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash][ext]'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].bundle.css'
    })
  ],
  optimization: {
    minimizer: [
      new TerserPlugin(), // 压缩JS
      new CssMinimizerPlugin(), // 压缩CSS
    ],
    splitChunks: {
      chunks: 'all', // 拆分第三方依赖到单独bundle
    },
  },
};

步骤2：安装依赖 #

在项目根目录执行命令：

npm init -y
npm install webpack webpack-cli terser-webpack-plugin mini-css-extract-plugin css-loader css-minimizer-webpack-plugin --save-dev

步骤3：执行打包 #

在package.json中添加脚本：

"scripts": {
  "build:assets": "webpack --mode production"
}

执行打包命令：

npm run build:assets

打包完成后，wwwroot/dist文件夹会生成压缩后的JS、CSS和资源文件。

步骤4：在_Host.cshtml中引入打包文件 #

替换原先的资源引入路径，改为指向dist文件夹的输出文件：

<!-- 替换之前的JS、CSS引入 -->
<link href="~/dist/css/app.[contenthash].bundle.css" rel="stylesheet" />
<script src="~/dist/js/vendors-node_modules_...bundle.js"></script> <!-- 根据实际生成的vendor文件名调整 -->
<script src="~/dist/js/app.[contenthash].bundle.js"></script>

提示：如果使用contenthash生成带哈希的文件名，可通过HtmlWebpackPlugin自动生成引用代码，避免手动修改路径。

问题2：通过npm获取模板并整合webpack到Blazor #

步骤1：安装npm包 #

执行命令安装Material Dashboard：

npm install material-dashboard --save

步骤2：调整webpack配置 #

修改webpack.config.js的入口，直接引用npm包中的资源，同时保留自定义代码：

module.exports = {
  entry: {
    app: [
      './src/js/custom.js', // 你的自定义JS
      'material-dashboard/dist/js/material-dashboard.min.js' // npm包中的JS
    ],
    styles: [
      './src/css/custom.css', // 你的自定义CSS
      'material-dashboard/dist/css/material-dashboard.min.css' // npm包中的CSS
    ]
  },
  // 其他配置和问题1一致，输出路径仍为wwwroot/dist
};

建议将自定义JS/CSS从wwwroot移到项目根目录的src文件夹，避免和打包文件混放。

步骤3：复制静态资源（可选） #

如果模板包含字体、图片等静态资源，使用copy-webpack-plugin复制到dist目录：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 在webpack配置中添加：

const CopyPlugin = require('copy-webpack-plugin');

plugins: [
  // ...其他插件
  new CopyPlugin({
    patterns: [
      {
        from: 'node_modules/material-dashboard/dist/assets',
        to: 'assets'
      },
    ],
  }),
]

步骤4：打包并引入 #

和问题1的步骤3、4一致，执行npm run build:assets后，在_Host.cshtml中引入dist文件夹的输出文件即可。

额外：整合到VS构建流程 #

要在VS编译项目时自动执行打包，在项目的.csproj文件中添加：

<Target Name="RunWebpack" BeforeTargets="Build">
  <Exec Command="npm run build:assets" />
</Target>

这样每次编译Blazor项目时，会自动触发webpack打包。

内容的提问来源于stack exchange，提问作者LA.27