magento2-react/webpack.config.js at master · Smile-SA/magento2-react · 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
const path = require('path');
const glob = require('glob');
const fs = require('fs');
const magentoRoot = process.env.MAGENTO_ROOT || __dirname; // Example: /var/www/html
const magentoTheme = process.env.MAGENTO_THEME || false; // Example: Magento/luma

if (!fs.existsSync(magentoRoot + '/app/etc/config.php')) {
    console.log('Invalid Magento root: ' + magentoRoot);
    process.exit();
}

let reactPaths = glob.sync(magentoRoot + '/vendor/*/*/**/view/frontend/react_source', {});
reactPaths = reactPaths.concat(glob.sync(magentoRoot + '/app/code/*/*/view/frontend/react_source', {}));
if (magentoTheme && fs.existsSync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source')) {
    reactPaths = reactPaths.concat(glob.sync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source', {}));
}

reactPaths.push(path.resolve(__dirname, 'node_modules'));

const outputFolder = path.resolve(magentoRoot + '/pub');
const generatedReactFile = path.resolve(magentoRoot + '/var/tmp/react.js');
let generatedReact = `
import React from 'react';
import ReactDOM from 'react-dom';
`;

let reactImportFiles = glob.sync(magentoRoot + '/vendor/*/*/**/view/frontend/react_source/_imports.js');
reactImportFiles = reactImportFiles.concat(glob.sync(magentoRoot + '/app/code/*/*/view/frontend/react_source/_imports.js', {}));
if (magentoTheme && fs.existsSync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source/_imports.js')) {
    reactImportFiles = reactImportFiles.concat(glob.sync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source/_imports.js', {}));
}

reactImportFiles.forEach(reactImportFile => {
    generatedReact += '\n// File ' + reactImportFile + '\n' + fs.readFileSync(reactImportFile);
});

let reactConfigurationFiles = glob.sync(magentoRoot + '/vendor/*/*/**/view/frontend/react_source/_component.js');
reactConfigurationFiles = reactConfigurationFiles.concat(glob.sync(magentoRoot + '/app/code/*/*/view/frontend/react_source/_component.js', {}));
if (magentoTheme && fs.existsSync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source/_component.js')) {
    reactConfigurationFiles = reactConfigurationFiles.concat(glob.sync(magentoRoot + '/app/design/frontend/' + magentoTheme + '/react_source/_component.js', {}));
}

reactConfigurationFiles.forEach(reactConfigurationFile => {
    generatedReact += '\n// File ' + reactConfigurationFile + '\n' + fs.readFileSync(reactConfigurationFile);
});

fs.writeFileSync(generatedReactFile, generatedReact);

module.exports = {
    mode: 'development',
    entry: generatedReactFile,
    resolve: {
        modules: reactPaths
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/react'],
                        plugins: [
                            "@babel/plugin-syntax-dynamic-import"
                        ]
                    }
                }
            },
            {
                test: /\.js$/,
                include: [path.resolve(__dirname, 'node_modules/@magento')],
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@magento/babel-preset-peregrine"]
                    }
                }
            }
        ]
    },
    output: {
        path: outputFolder,
        publicPath: '/',
        filename: 'js/react.bundle.js'
    }
};