[webpack]ど初心者がscssをコンパイルできるようにしてみた(for mac)

npm i -D css-loader style-loader

// js最適化
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css最適化
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// css抽出
const TerserJSPlugin = require('terser-webpack-plugin');
 
// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";
 
// ソースマップの利用有無(productionのときはソースマップを利用しない)
const enabledSourceMap = MODE === "development";
 
module.exports = {
 // モード値を production に設定すると最適化された状態で、
 // development に設定するとソースマップ有効でJSファイルが出力される
 // watchモードを有効にする
 watch: true,
 mode: MODE,
//↓ソースマップの作成をON/OFF
 // devtool: "source-map",
 
 // メインとなるJavaScriptファイル（エントリーポイント）
 entry: `./src/js/app.js`,
 // ファイルの出力設定
 output: {
   //  出力ファイルのディレクトリ名
   path: `${__dirname}/dist`,
   // 出力ファイル名
   filename: "app.js",
 },
 
 module: {
   rules: [
     // Sassファイルの読み込みとコンパイル
     {
       test: /\.scss/, // 対象となるファイルの拡張子
       use: [
         // CSSファイルを書き出すオプションを有効にする
         {
           loader: MiniCssExtractPlugin.loader,
         },
         // CSSをバンドルするための機能
         {
           loader: "css-loader",
           options: {
             // オプションでCSS内のurl()メソッドの取り込みを禁止する
             url: false,
             // ソースマップの利用有無
　　　　　//↓ソースマップを作成（falseで作成しないようにできる）
             sourceMap: true,
             // 0 => no loaders (default);
             // 1 => postcss-loader;
             // 2 => postcss-loader, sass-loader
             importLoaders: 2,
           },
         },
         {
           loader: "postcss-loader",
           options: {
　　　　//↓ソースマップを作成（falseで作成しないようにできる）
             sourceMap: true,
             postcssOptions: {
               plugins: [
                 // Autoprefixerを有効化
                 require("autoprefixer")({
                   // ☆IEは11以上、Androidは4.4以上
                   // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
                   browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
                 })
               ],
             },
           },
         },
         {
           loader: "sass-loader",
           options: {
　　　　//↓ソースマップを作成（falseで作成しないようにできる）
             sourceMap: true,
           },
         },
       ],
     },
     {
//file-loaderでcssで使ったファイルがコンパイルされるようにする
       test: /\.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/,
       loader: 'file-loader',
       options:{
           name:'images/[name].[hash].[ext]'
       }
     },
   ],
 },
 
 plugins: [
   // CSSファイルを外だしにするプラグイン
   new MiniCssExtractPlugin({
     // ファイル名を設定します
     filename: "app.css",
   }),
 ],
 optimization: {
//コンパイル時に省略する
   minimizer: [new TerserJSPlugin({}),new OptimizeCSSAssetsPlugin({})],
 },
 performance: { hints: false } // コンパイルするファイルのサイズ無視
};

// js最適化
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css最適化
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// css抽出
const TerserJSPlugin = require('terser-webpack-plugin');

node_modules