const { resolve } = require('path');
                    const HtmlWebpackPlugin = require('html-webpack-plugin');
                    const MiniCssExtractPlugin = require('mini-css-extract-plugin');

                    
 
// 引入壓縮css外掛
                    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


                    module.exports = {
                    entry: './src/js/index.js',
                    output: {
                        filename: 'js/built.js',
                        path: resolve(__dirname, 
 
'build')
                    },
                    module: {
                        rules: [
                        {
                            test: /\.css$/,
                            use: [
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            {
                                loader: 
 
'postcss-loader',
                                options: {
                                ident: 'postcss',
                                plugins: () => [
                                    // postcss的外掛
                                    require('postcss-preset-env')()
                                ]
                                }
                            }
                            ]
                        }
                        ]
                    },
                    plugins: [
                        new HtmlWebpackPlugin({
                        template: './src/index.html'
                        }),
                        new MiniCssExtractPlugin({
                        filename: 'css/built.css'
                        }),


                        // 壓縮css外掛
                        new OptimizeCssAssetsWebpackPlugin()
                    ],
                    mode: 'development'
                    };