Webpack 5 : class is not defined

Salut ,

j'essai d'utiliser webpack pour bundler les js de mon appli. Mais je n'arrive pas à utiliser une classe créée dans un fichier.

Mes fichiers se présentent ainsi :

app.js

Code:

1
2
require('./bootstrap');
require('./users');

bootstrap.js // Bootstrap de l'application avec chargement des lib commune

Code:

1
2
3
4
5
6
7
8
9
10
11
 
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
 
    require('bootstrap');
} catch (e) {}
 
require('bootstrap/dist/css/bootstrap.min.css');
require('@fortawesome/fontawesome-free/css/all.min.css');
require('../css/app.css');

Ici pas de problème j'ai bien accès à jquery dans mes pages web.

users.js // La classe que je souhaiterais utilisé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
class Users {
    constructor(token) {
        this.csrf = token;
    }
 
    initEvents() {
        $('#search_value').on('keyup',(e) => {
            e.preventDefault();
            this.searchUser();
        });
    }
}

Et dans mon html je fais :

Code:

1
2
3
4
5
6
7
<script src="/dist/app.js"></script>
 
<script type="text/javascript">
	const token = 'aaaaaa';
	const user = new Users(token);
	user.initEvents();
</script>

Mais j'ai l'errreur :

Citation:

index:112 Uncaught ReferenceError: Users is not defined

Quand je regarde le bundle généré par webpack , je vois bien le code de users.js , mais impossible d'avoir accès à la classe.

Pour finir mon fichier de config webpack :

Code:

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
module.exports = {
    entry: './src/ressources/js/app.js',
    output: {
        path: __dirname+'/src/pub/dist',
        filename: 'app.js'
    },
    plugins: [new MiniCssExtractPlugin(),new CleanWebpackPlugin()],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(svg|gif|jpg|png|eot|woff|woff2|ttf)$/,
                use: [
                    'url-loader',
                ],
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
            }),
            new OptimizeCssAssetsPlugin(),
        ],
    }
}

Qu'est ce qu'il me manque pour avoir accès a cette classe ? Sachant qu'il y'aura beacoup d'autre classe que j'utiliserais à terme.