使用 Webpack 和 Laravel Mix 解析动态模块

Question

Good time of the day,

Recently I've been trying to implement dynamic module loading functionality for my project. However, I'm failing for past few hours. To give you an idea of what I'm trying to achieve, here is the structure of the project

• plugins
  • developer
    • assets
      • scss
        • developer.scss
      • js
        • developer.js
• themes
  • theme_name
    • webpack.mix.js
    • node_modules/
    • source
      • js
        • application.js
        • bootstrap.js
      • scss
        • application.scss
        • _variables.scss

So, in order to get the available plugins , I've made the following function

/**
 * Get all plugins for specified developer
 * which have 'assets' folder
 * @param developerPath
 * @param plugins
 */
function getDeveloperPlugins(developerPath, plugins) {
    if (fs.existsSync(developerPath)) {
        fs.readdirSync(developerPath).forEach(entry => {
            let pluginPath = path.resolve(developerPath, entry),
                assetsPath = path.resolve(pluginPath, 'assets');
            if (fs.existsSync(assetsPath))
                plugins[entry] = assetsPath;
        });
    }
}

This function loads all the available plugins for the specified developer, then goes inside and looks for the assets folder, if it exists, then it returns it and we can work with the provided directory later.

The next step is to generate the reference for every plugin (direct path to the developer_name.js file) which later should be 'mixed' into one plugins.bundle.js file.

In order to achieve this, the following piece of code 'emerged'

_.forEach(plugins, (directory, plugin) => {
    let jsFolder = path.resolve(directory, 'js'),
        scssFolder = path.resolve(directory, 'scss');
    if (fs.existsSync(jsFolder)) {
        webpackModules.push(jsFolder);
        let possibleFile = path.resolve(jsFolder, plugin + '.js');
        if (fs.existsSync(possibleFile))
            pluginsBundle.js[plugin] = possibleFile;
    }
    if (fs.existsSync(scssFolder)) {
        webpackModules.push(scssFolder);
        let possibleFile = path.resolve(scssFolder, plugin + '.scss');
        if (fs.existsSync(possibleFile))
            pluginsBundle.scss[plugin] = possibleFile;
    }
});

And the last step before I'm starting to edit the configuration of the Webpack is to get the folders for both scss and js files for all plugins and all developers:

let jsPluginsBundle = _.values(pluginsBundle.js),
    scssPluginsBundle = _.values(pluginsBundle.scss);

And here is where the problems start to appear. I've tried many solutions offered either here on GitHub (in respective repositories), but I've failed so many times.

The only error I'm having now is this one:

ERROR in F:/Web/Projects/TestProject/plugins/developer/testplugin/assets/js/testplugin.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js"

Yes, i know that webpack.mix.js file should be in the root folder of the project, however, i'm just developing theme, which uses modules developed by other members of the team.
So, idea was to:

• Start build process: npm run dev|prod
• Load plugins for all needed developers automatically
• Use methods and html tags provided by the plugin (it is a mix of PHP for API routing and Vue.js for Components, etc) as follows: <test-component></test-component>

Any help is really appreciated, i just cant get my head around that error. If you need extra information, i'm ready to help since i myself need help to solve this issue =)

Update: The latest Webpack config used by mix.webpackConfig() (still failing though)

let webpackConfiguration = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [
                        'babel-preset-env'
                    ].map(require.resolve),
                    plugins: [
                        'babel-plugin-transform-object-rest-spread'
                    ].map(require.resolve)
                }
            }
        }]
    },
    resolve: {
        modules: webpackModules
    }
};

mix.webpackConfig(webpackConfiguration);

And this is the content of the webpackModules variable:

[ 
  'F:\\Web\\Projects\\TestProject\\themes\\testtheme\\node_modules',
  'F:\\Web\\Projects\\TestProject\\themes\\testtheme',
  'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js',
  'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\scss'
]

Answer 1

Okay, after 7 hours I've decided to try the most obvious method to solve the problem, to create node_modules folder in the root of the project and install laravel-mix there, and it worked like a charm.

Looks like, if it cant find the module in the directory outside the root scope of the Webpack, it will go up the tree to find the node_modules folder.

Developers should allow us to set the root folder for Webpack to fetch all the modules i guess, but well, problem is solved anyways.