webpack.config.js

/* eslint-env node */
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { NoEmitOnErrorsPlugin, DefinePlugin } = require('webpack');
const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');

const ASSET_PATH = 'assets';
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    mode: devMode ? 'development' : 'production',
    devtool: 'source-map',
    recordsPath: path.join(__dirname, '.records'),
    entry: {
        index: './src/index.ts',
        results: './src/results.ts',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: `${ASSET_PATH}/[name].[hash].js`,
        chunkFilename: `${ASSET_PATH}/[id].[hash].js`,
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
    },
    devServer: {
        static: './dist',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                include: [
                    path.resolve(__dirname, '../typings'),
                    path.resolve(__dirname, 'typings'),
                    path.resolve(__dirname, 'src'),
                ],
                use: [
                    {
                        loader: 'ts-loader',
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|svg|gif|ttf|woff2?|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: `${ASSET_PATH}/[hash].[ext]`,
                        },
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                            optipng: { optimizationLevel: 7 },
                            gifsicle: { interlaced: false },
                        },
                    },
                ],
            },
            {
                test: /\.less$/,
                include: path.resolve(__dirname, './less'),
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 'postcss-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.css$/,
                include: path.resolve(__dirname, './node_modules/monaco-editor'),
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.ttf$/,
                include: path.resolve(__dirname, './node_modules/monaco-editor'),
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        // don't emit output when there are errors
        new NoEmitOnErrorsPlugin(),

        // add monaco editor
        new MonacoEditorWebpackPlugin({
            languages: ['json', 'javascript', 'typescript'],
        }),

        // extract inline css into separate 'styles.css'
        new MiniCssExtractPlugin({
            filename: `${ASSET_PATH}/[name].[hash].css`,
            chunkFilename: `${ASSET_PATH}/[id].[hash].css`,
        }),

        // create marketing html
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './html/index.ejs',
            title: 'Pixi Playground',
            description: 'Create and view demos using pixi.js.',
            url: 'http://pixiplayground.com',
            cache: true,
            chunks: ['index'],
        }),

        // create marketing html
        new HtmlWebpackPlugin({
            filename: 'results.html',
            template: './html/results.ejs',
            title: 'Pixi Playground Results',
            description: 'Pixi Playground Results',
            url: 'http://pixiplayground.com',
            cache: true,
            chunks: ['results'],
        }),

        // copy some static assets favicon stuff
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './html/favicons/*',
                    to: '[name][ext]',
                },
                {
                    from: './definitions/**',
                },
            ],
        }),

        // add some extra defines
        new DefinePlugin({
            __BASE_ORIGIN__: JSON.stringify(process.argv.find(v => v.includes('webpack-dev-server')) ? 'http://localhost:3000' : ''),
        }),
    ],
};