interactive-traffic/webpack.config.js at master · nixolas1/interactive-traffic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
const path = require("path")
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ThreeWebpackPlugin = require('@wildpeaks/three-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const outputFolder = __dirname + "/dist";


module.exports = (env, argv) => {
    const devMode = argv.mode === "development";

    let plugins = [
        new CleanWebpackPlugin([outputFolder]),
        new webpack.HashedModuleIdsPlugin(),
        new ThreeWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash:6].bundle.css",
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.png',
        }),
    ];

    if(!devMode) {
        plugins.push(new CopyWebpackPlugin([{ from: 'public', to: '.', ignore: ['index.html'] }], {}))
    }

    return {
        context: __dirname,
        entry: {
            app: "./src/index.js",
        },
        output: {
            path: outputFolder,
            publicPath: '/',
            filename: devMode ? "[name].bundle.js" : "[name].[hash:6].bundle.js",
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    include: [
                        path.join(__dirname, 'src'),
                        path.join(__dirname, './node_modules/ky') // was not downcompiled
                    ],
                    use: {
                        loader: "babel-loader"
                    },
                },
                {
                    test: /\.(glsl|vert|frag)$/,
                    exclude: /node_modules/,
                    loader: 'shader-loader',
                },
                {
                    test: /\.scss$/,
                    exclude: /node_modules/,
                    use: [
                        devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                        {
                            loader: "css-loader",
                            options: {
                                importLoaders: 2, // IMPORTANT! CHANGE ACCORDING TO NUMBER OF OTHER STYLE LOADERS
                                url: false,
                            },
                        },
                        {
                            loader: "postcss-loader",
                        },
                        {
                            loader: "fast-sass-loader",
                        }
                    ],
                },
            ],
        },

        resolve: {
            extensions: [".js", ".jsx"],
            modules: [path.resolve(__dirname, './src'), 'node_modules'],
        },

        plugins: plugins,

        devServer: {
            contentBase: "./public",
            historyApiFallback: true,
        },

        stats: {
            hash: false,
            version: false,
            timings: false,
            children: false,
            errors: true,
        },
    }
};


/*
{
    test: /\.svg$/,
    use: [
        {
            loader: "svg-sprite-loader",
            options: {
                extract: true,
                spriteFilename: "icons.bundle.svg",
            },
        },
        {
            loader: "svgo-loader",
        },
    ],
},*/