Webpack4でJSとCSSを圧縮する時の設定。多分余計なのがある。

pakage.json

{
    "scripts": {
        "watch": "webpack --mode development --watch --color --progress",
        "dev": "webpack --mode development",
        "prod": "webpack --mode production --env.production",
        "start": "webpack-dev-server --color --mode development"
    },
    "main": "webpack.config.js",
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/preset-env": "^7.1.0",
        "@types/source-map": "^0.5.7",
        "autoprefixer": "^9.1.3",
        "babel-loader": "^8.0.4",
        "css-loader": "^1.0.0",
        "cssnano": "^4.1.3",
        "expose-loader": "^0.7.5",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "^2.0.0",
        "install": "^0.12.1",
        "mini-css-extract-plugin": "^0.4.1",
        "node-sass": "^4.9.3",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "postcss-loader": "^2.1.6",
        "precss": "^3.1.2",
        "resolve-url-loader": "^2.3.0",
        "sass-loader": "^7.1.0",
        "smoothscroll-polyfill": "^0.4.3",
        "style-loader": "^0.21.0",
        "uglifyjs-webpack-plugin": "^1.2.7",
        "webpack": "^4.17.1",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.6"
    },
    "private": true
}

webpack.config.js

/*!
 * Webpack.config.js
 *
 * @author    Logue <logue@hotmail.co.jp>
 * @license   MIT
 */
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = env => {
    const NODE_ENV = (env && env.production) ? 'production' : 'development';
    return [{
        mode: NODE_ENV,
        // サーバー
        devServer: {
            clientLogLevel: 'warning',
            historyApiFallback: true,
            hot: true,
            publicPath: '/',
            inline: true,
            overlay: true,
            contentBase: path.join(__dirname, 'dist'),
            host: '0.0.0.0',
            port: 3000,
            disableHostCheck: true
        },
        stats: {
            colors: true,
        },
        /* ----------------
          JS用モジュール
        ----------------- */
        // ソース
        context: path.resolve(__dirname, './src/js'),
        entry: {
            app: path.resolve(__dirname, './src/js/app.js') // 全体のスクリプト
        },
        // developmentモードのときにソースマップを出力する
        devtool: NODE_ENV === 'development' ? 'source-map' : 'none',
        // 出力先
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'js/[name].js'
        },
        module: {
            rules: [{
                // 拡張子 .js の場合
                test: /\.js$/,
                rules: [{
                    // Babel を利用する
                    loader: 'babel-loader',
                    // Babel のオプションを指定する
                    options: {
                        presets: [
                            // プリセットを指定することで、ES2018 を ES5 に変換
                            '@babel/preset-env',
                        ]
                    }
                }]
            }]
        },
        // パッケージに含めないライブラリ
        externals: {
            jquery: 'jQuery'
        },
        plugins: [
            // bootstrap のコードから jQuery が直接見えるように
            // http://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript
            //new webpack.ProvidePlugin({
            //    $: "jquery",
            //    jQuery: "jquery",
            //    "window.jQuery": "jquery",
            //    Popper: ["popper.js", "default"],
            //}),
            // デバッグ
            new webpack.EnvironmentPlugin({
                NODE_ENV: NODE_ENV,
                DEBUG: NODE_ENV === 'development'
            }),
            new webpack.HotModuleReplacementPlugin()
        ],
        optimization: {
            // developmentモードでビルドした場合
            // minimizer: [] となるため、consoleは残されたファイルが出力される
            // puroductionモードでビルドした場合
            // minimizer: [ new UglifyJSPlugin({... となるため、consoleは削除したファイルが出力される
            minimizer: NODE_ENV === 'development' ? [
                // 頻繁に使用されるコードを整理
                new webpack.optimize.OccurrenceOrderPlugin(false)
            ] : [
                // 重複処理を削除
                //new webpack.DedupePlugin(),
                // 頻繁に使用されるコードを整理
                new webpack.optimize.OccurrenceOrderPlugin(true),
                // スクリプトを圧縮
                new UglifyJSPlugin({
                    cache: true,
                    parallel: true,
                    uglifyOptions: {
                        warning: "verbose",
                        ecma: 6,
                        beautify: true,
                        comments: false,
                        mangle: true,
                        toplevel: true,
                        keep_classnames: false,
                        keep_fnames: false,
                        compress: {
                            unsafe_comps: true,
                            properties: true,
                            keep_fargs: false,
                            pure_getters: true,
                            collapse_vars: true,
                            unsafe: true,
                            warnings: false, // good for prod apps so users can't peek behind curtain
                            sequences: true,
                            dead_code: true, // big one--strip code that will never execute
                            drop_debugger: true,
                            comparisons: true,
                            conditionals: true,
                            evaluate: true,
                            booleans: true,
                            loops: true,
                            unused: true,
                            hoist_funs: true,
                            if_return: true,
                            join_vars: true,
                            drop_console: true // strips console statements
                        },
                        mangleProperties: {
                            ignore_quoted: true
                        }
                    }
                })
            ],
            splitChunks: {
                chunks: 'async',
                minSize: 30000,
                maxSize: 0,
                minChunks: 1,
                maxAsyncRequests: 5,
                maxInitialRequests: 3,
                automaticNameDelimiter: '~',
                name: true,
                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10
                    },
                    default: {
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        },
        resolve: {
            extensions: ['.js']
        },

        watch: NODE_ENV === 'development'
    }, {
        /* ----------------
          CSS用モジュール
        ----------------- */
        context: path.resolve(__dirname, './src/scss'),

        mode: NODE_ENV,
        devtool: NODE_ENV === 'development' ? 'source-map' : 'none',
        stats: {
            colors: true,
        },
        entry: {
            app: path.resolve(__dirname, './src/scss/app.scss')
        },
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'css/[name].css'
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader']
            }, {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        // CSSをバンドルするための機能
                        {
                            loader: "css-loader",
                            options: {
                                // オプションでCSS内のurl()メソッドの取り込みを禁止する
                                url: false,
                                // CSSの空白文字を削除する
                                minimize: NODE_ENV === 'development',
                                // ソースマップを有効にする
                                sourceMap: NODE_ENV === 'development' ? 2 : 0,
                                // 0 => no loaders (default);
                                // 1 => postcss-loader;
                                // 2 => postcss-loader, sass-loader
                                importLoaders: 2
                            }
                        },
                        // PostCSSのための設定
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: NODE_ENV === 'development',
                                plugins: () => {
                                    return [
                                        require('precss'),
                                        // Autoprefixerを有効化
                                        // ベンダープレフィックスを自動付与する
                                        require('autoprefixer')({
                                            grid: true
                                        })
                                    ];
                                }
                            }
                        },
                        //{
                        //    loader: 'resolve-url-loader'
                        //},
                        // Sassをバンドルするための機能
                        {
                            loader: 'sass-loader',
                            options: {
                                url: false,
                                // ソースマップの利用有無
                                sourceMap: NODE_ENV === 'development',
                                includePaths: [path.resolve(__dirname, 'node_modules')]
                            }
                        }

                    ]
                })
            }, {
                test: /\.(eot|otf|ttf|woff2?|svg)(\?.+)?$/,
                include: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: {
                    loader: 'file-loader',
                    options: {
                        path: path.resolve(__dirname, './dist'),
                        publicPath: './dist',
                        name: 'fonts/[name].[ext]'
                    }
                }
            }]
        },
        plugins: [
            new ExtractTextPlugin({
                filename: (getPath) => {
                    return getPath('css/[name].css')
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.optimize\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
                canPrint: true
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css"
            })
        ],
        watch: NODE_ENV === 'development',
        optimization: {
            // 圧縮設定
            minimizer: [
                new UglifyJSPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: true // set to true if you want JS source maps
                }),
                new OptimizeCssAssetsPlugin({})
            ]
        }
    }]
};