dvlden / webpack-config Goto Github PK

const path = require('path')
const webpack = require('webpack')
const minJSON = require('jsonminify')
const DashboardPlugin = require('webpack-dashboard/plugin');

const plugins = {
    progress: require('webpackbar'),
    clean: require('clean-webpack-plugin'),
    extractCSS: require('mini-css-extract-plugin'),
    // extractText: require('extract-text-webpack-plugin'),
    sync: require('browser-sync-webpack-plugin'),
    sri: require('webpack-subresource-integrity')
}

module.exports = (env = {}, argv) => {
    const isProduction = argv.mode === 'production'

    let config = {
        context: path.resolve('.'),

        entry: {
            // vendor: [
            //     '../main/src/main.js'
            // ],
            app: [
                '../main_app/src/style.scss',
                '../main_app/src/main.js'
            ]
        },

        output: {
            path: path.resolve('../main_dist'),
            publicPath: '/resources',
            filename: 'bundle.js',
            crossOriginLoading: 'anonymous'
        },

        module: {
            rules: [
                {
                    test: /\.((s[ac]|c)ss)$/,
                    use: [
                        plugins.extractCSS.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: ! isProduction
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                sourceMap: ! isProduction,
                                plugins: (() => {
                                    return isProduction ? [
                                        require('autoprefixer')(),
                                        require('cssnano')({
                                            preset: ['default', {
                                                minifySelectors: false
                                            }]
                                        })
                                    ] : []
                                })()
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                outputStyle: 'expanded',
                                sourceMap: ! isProduction
                            }
                        }
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env'
                            ]
                        }
                    }
                },
                {
                    test: /\.(gif|png|jpe?g|svg)$/i,
                    exclude: /fonts/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[path][name].[ext]',
                                publicPath: '..' // use relative urls
                            }
                        },
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                bypassOnDebug: ! isProduction,
                                mozjpeg: {
                                    progressive: true,
                                    quality: 65
                                },
                                optipng: {
                                    enabled: false
                                },
                                pngquant: {
                                    quality: '65-90',
                                    speed: 4
                                },
                                gifsicle: {
                                    interlaced: false
                                }
                            }
                        }
                    ]
                },
                {
                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    exclude: /images/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            publicPath: '../main_dist/fonts/' // use relative urls
                        }
                    }]
                }
            ]
        },

        devServer: {
            contentBase: path.join('../main_app', 'src'),
            port: 3000,
            overlay: {
                warnings: true,
                errors: true
            },
            quiet: true,
            // open: true
        },

        plugins: (() => {
            let common = [
                new plugins.extractCSS({
                    filename: '[name].css'
                }),
                new plugins.progress({
                    color: '#5C95EE'
                })
            ]

            const production = [
                new plugins.clean(['dist']),
                new plugins.sri({
                    hashFuncNames: ['sha384'],
                    enabled: true
                })
            ]

            const development = [
                new plugins.sync(
                    {
                        host: 'localhost',
                        port: 3000,
                        proxy: 'http://localhost:3000/'
                    },
                    {
                        reload: true
                    }

                ),
                //auto updating on dev server
                new webpack.HotModuleReplacementPlugin(),
                //shows relative path in HotModuleReplacement
                new webpack.NamedModulesPlugin(),
                //sexy dashboard
                new DashboardPlugin()
            ]

            return isProduction
                ? common.concat(production)
                : common.concat(development)
        })(),

        devtool: (() => {
            return isProduction
                ? '' // 'hidden-source-map'
                : 'source-map'
        })(),

        resolve: {
            modules: [
                'node_modules',
                path.resolve('../main_app/node_modules'),
                path.resolve('../node_modules'),
                path.resolve('../main/node_modules')
            ],
            alias: {
                // '~': path.resolve(__dirname, 'src/scripts/'),
                site: path.resolve(`./../../`),
                base: path.resolve(`../main/src/`),
                app: path.resolve(`../main_app/src/`),
                'jquery': 'jquery/dist/jquery',
                'jQuery': 'jquery/dist/jquery'
            }
        }
    }

    return config
};