【ASP.NET Core Web】webpackを使う

ASP.NET Core Webでもwebpack（sassやTypeScriptも）を使いたい！

概要

今回の記事では、ASP.NET Core Webでwebpackを使う手順を掲載する。

ASP.NET Core WebでもJSとCSSをゴリゴリ開発するなら必須になると思われ。

仕様書

環境

.NET 7.0

手順書

Node.jsを前もってインストールしておく。VS Installerからでも可。

コマンドプロンプトでプロジェクトのルートから下記のコマンドを実行する。（TypeScriptを使ったり、ミニファイしたり、sassを使ったりする例）
```
npm i -D -E css-loader sass-loader sass mini-css-extract-plugin ts-loader typescript webpack webpack-cli terser-webpack-plugin css-minimizer-webpack-plugin
```

プロジェクトのルートにwebpack.config.jsを作り、下記のように入力する。


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

module.exports = (env, argv) => {
const config = {
entry: ["./Scripts/site.ts", "./Styles/site.scss"],
output: {
path: path.resolve(__dirname, "wwwroot"),
filename: "js/site.js",
publicPath: "/",
},
resolve: {
extensions: [".js", ".ts"],
},
module: {
rules: [
{
test: /.ts$/,
use: "ts-loader",
},
{
test: /.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
plugins: [

        new MiniCssExtractPlugin({
            filename: "css/site.css",
        }),
    ],
    optimization: {
        minimizer: [
            new TerserPlugin(),
            new CssMinimizerPlugin(),
        ]
    },
};

if (argv.mode === 'development') {
    config.devtool = 'source-map';
}

if (argv.mode === 'production') {

}

return config;

};

ソースのCSSはStylesフォルダに設置する。TS（JSも）はScriptsフォルダに設置する。
CSSはwwwroot/css/site.css、JSはwwwroot/js/site.jsに出力される。
1. Visual Studioでプロジェクトのプロパティを開き、ビルドイベントの項目に下記のように入力する。
```bash
if "$(ConfigurationName)" == "Debug" (
  webpack-cli --mode development --config webpack.config.js
)

if "$(ConfigurationName)" == "Release" (
  webpack-cli --mode production --config webpack.config.js
)

プロジェクトのビルド時にDebugとReleaseでwebpackのモードをdevelopmentとproductionに切り替えてる。別のやり方（webpack.config.jsをモード毎に作るとか）もあるが、これは1つのwebpack.config.jsで済ましちゃう例。

プロジェクトのビルド時にwebpackがエラーを出力しなければOKだ！

まとめ（感想文）

日頃、webpackをあまり使わないのでかなり試行錯誤する羽目になったらしい。

タスクランナー使いたかったんだけども、何故かwebpack.config.jsを認識しない！おろろーん！！

あと、Visual Studioの「ツール」->「コマンドライン」->「開発者コマンドプロンプト」からコマンドプロンプトを開けるんだけども、プロジェクトのルートがカレントディレクトリになってると思ったら、ソリューションのルートがカレントディレクトリになってて、そこに一生懸命npm installしてたのは、ここだけの秘密！

TypeScriptをつかうか、JavaScriptをそのまま使うか迷ってる。なんやかんやJavaScriptが楽。ただ後々のことを考えるとTypeScriptの方が楽になっていきそうな感じもする。悩んじゃう。