pvpokemon/webpack.config.js

const path = require('path');
const options = require('./webpack.config.options');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const typescriptResolve = {
    alias: {
        'moment$': path.resolve('./node_modules/moment/min/moment-with-locales.min.js'),
        'moment-timezone$': path.resolve('./node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022.min.js'),

        // keep in sync with tsconfig.json `paths` and tslint.json `no-implicit-dependencies`
        'api': path.resolve('./src/ts/api'),
        'app': path.resolve('./src/ts/app'),
        'common': path.resolve('./src/ts/common'),
        'externals': path.resolve('./externals'),
        'styles': path.resolve('./src/scss'),
    },
    extensions: ['.ts', '.tsx', '.js'],
};

module.exports = function (env) {
    env = env || {};

    const plugins = [
        new StyleLintPlugin({
            configFile: '.stylelintrc',
            context: 'src',
            emitErrors: true,
            failOnError: false,
            quiet: false,
        }),
    ].concat(options.getPlugins(env));

    return {
        devServer: {
            contentBase: __dirname,
            historyApiFallback: true,
            writeToDisk: true,
            hot: false,
        },
        entry: {
            'global': [
                '@babel/polyfill', // this is intended to be on every single page, legacy or new!
                'nes.css/scss/nes.scss',
                './src/scss/index.scss' // these are the global styles that should never be imported by a component
            ],

            'main': './src/ts/app/index.tsx',
        },
        optimization: options.getOptimizations(),
        output: {
            path: path.resolve(options.outputDirectory),
            filename: '[name]-bundle.js',
            // filename: '[name]-bundle.[chunkhash].js',
            sourceMapFilename: '[file].map'
        },
        resolve: typescriptResolve,
        devtool: 'source-map',
        mode: 'development',
        plugins: plugins,
        module: {
            rules: [
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                {
                    test: /\.js$/,
                    enforce: 'pre',
                    exclude: /node_modules/,
                    use: [
                        { loader: 'source-map-loader' }
                    ]
                },
                {
                    test: /\.tsx?$/,
                    enforce: 'pre',
                    exclude: /node_modules/,
                    use: [
                        { loader: 'source-map-loader' },
                    ]
                },
                {
                    test: /\.tsx?$/,
                    enforce: 'pre',
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'tslint-loader',
                            options: {
                                emitErrors: !env.WARN_ON_LINT,
                                failOnHint: !env.WARN_ON_LINT,
                                typeCheck: false,
                            }
                        },
                    ]
                },
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: [
                        { loader: 'babel-loader' }
                    ]
                },
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    use: [
                        { loader: 'babel-loader' },
                        { loader: 'ts-loader' },
                    ]
                },
                {
                    test: /\.scss$/,
                    exclude: [
                        /node_modules/,
                        /src\/scss\/index\.scss/
                    ],
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it use publicPath in webpackOptions.output
                                // publicPath: '../'
                            }
                        },
                        { loader: 'css-modules-typescript-loader' },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS,
                                modules: true,
                                localIdentName: '[name]__[local]__[hash:base64:5]',
                                importLoaders: 1, // 0 => no loaders (default); 1 => sass-loader
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS
                            }
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    include: [
                        /node_modules/,
                        /src\/scss\/index\.scss/
                    ],
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it use publicPath in webpackOptions.output
                                // publicPath: '../'
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS,
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    exclude: /node_modules/,
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-modules-typescript-loader' },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS,
                            }
                        }
                    ],
                },
                {
                    test: /\.css$/,
                    include: /node_modules/,
                    use: [
                        { loader: 'style-loader' },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: !!env.CSS_SOURCEMAPS,
                            }
                        }
                    ],
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [
                        { loader: 'file-loader' },
                    ]
                },
            ]
        }
    }
};