Webpack Encore：无法导入本地依赖项

Question

I want to add an entry for a JS file which in turn imports several other JS files.

However when I run encore I get a "This dependency was not found" error.

webpack.config.js

...

.addEntry('app', './theme/js/scripts.js')

...

./theme/js/scripts.js

import * as Site from 'Site'

$(() => {
  Site.run()
})

./theme/es/Site.js

import $ from 'jquery';
import Base from 'Base';
import Menubar from 'Menubar';
import Sidebar from 'Sidebar';
import PageAside from 'PageAside';

... more code

The error that I am getting is

This dependency was not found:

• Site in ./theme/js/scripts.js

To install it, you can run: npm install --save Site

I don't think it can be "installed" as this is a dependency which is part of a theme that I have.

Unfortunately I cannot change the code in any of the files in ./theme So I am wondering if there a way to load the dependencies in Webpack Encore?

In the traditional webpack config I would have done the following:

module.exports = {
  resolve: {
    extensions: ['.js'],
    alias: {
      Base: path.resolve(config.scripts.source, 'Base.js'),
      Site: path.resolve(config.scripts.source, 'Site.js'),
      ....
    }
  },

But how can I import these with Webpack Encore?

Answer 1

It seems like that at the current moment webpack encore does not offer any syntax for adding helper functions.

Based on the comments here https://github.com/symfony/webpack-encore/issues/37 the solution would be following:

webpack.config.js

let config = Encore.getWebpackConfig();

config.resolve = {
    extensions: ['.js'],
    alias: {
        Base: path.resolve(__dirname, './remark/es/Base.js'),
        Site: path.resolve(__dirname, './remark/es/Site.js'),
        ...
    }
};

// export the final configuration
module.exports = config;

Answer 2

In ES6 you can use module. The solution is to utilize ES6's syntax, import and export statements, an elegant and maintainable approach that allows us to keep things separated, and only available when we need it.