farm/webpack.common.js

// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const CssUrlRelativePlugin = require('css-url-relative-plugin')

module.exports = {
    entry: {
        app: './src/main.jsx',
    },
    output: {
        filename: './assets/[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Alpha Centauri Farming',
            filename: 'main.html',
            meta: {viewport: 'width=device-width, initial-scale=1'},
        }),
        new FaviconsWebpackPlugin('./assets/img/tractor.svg'),
        new MiniCssExtractPlugin({
            filename: './assets/[name].[contenthash].css',
            chunkFilename: './assets/[id].[contenthash].css',
        }),
        new CopyPlugin([
            { from: './src/server/farm.scm', to: './[name].[ext]' },
            { from: './src/server/farm', to: './[name]' },
            { from: './assets/game/', to: './assets/game/' }
        ]),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer()
                ]
            }
        }),
        new CssUrlRelativePlugin()
    ],
    module: {
        rules: [
            {
                test: /\.m?(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', { modules: false }],
                                  "@babel/preset-react",],
                    }
                }
            },
            // {
            //     test: /mars-texture.png$/,
            //     loader: 'file-loader',
            //     options: {
            //         name: './assets/img/[name].[contenthash].[ext]',
            //     },
            // },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: './assets/img/[name].[contenthash].[ext]',
                },
            },
            {
                test: /\.s[ac]ss$/i,
                exclude: /(node_modules|bower_components)/,
                use: [
                    // Creates `style` nodes from JS strings
                    MiniCssExtractPlugin.loader,
                    // Translates CSS into CommonJS
                    'css-loader',
                    'postcss-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
        ],
    },
};