ワイの中でさいきょうのWebpack設定（メモ用）

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const enableSourceMap = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "",
    },
    module: {
        rules: [
            {
                test: /\.scss/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                        options: {
                            url: false,
                            sourceMap: enableSourceMap,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: enableSourceMap,
                            postcssOptions: {
                                plugins: [
                                    "autoprefixer",
                                    ['css-declaration-sorter', {order: 'smacss',}],
                                    ['postcss-sort-media-queries', { sort: 'mobile-first' }],
                                    require('cssnano')({ // cssnanoを導入
                                        preset: 'default',
                                    })
                                ],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers'),
                            },
                            sourceMap: enableSourceMap,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g|webp|svg|eot|woff?|ttf)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: 'images/[name].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false,
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
    ],
    devtool: "source-map",
    watchOptions: {
        ignored: /node_modules/
    },
    devServer: {
        //ルートディレクトリの指定
        contentBase: path.join(__dirname, ''),
        //サーバー起動時にブラウザを自動的に起動
        open: true,
        // ルートディレクトリのファイルを監視（変更があると自動的にリロードされる）
        watchContentBase: true,
        //バンドルされたファイルを出力する（実際に書き出す）
        writeToDisk: true
    },
};