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

Question

我想为一个 JS 文件添加一个条目，该文件又会导入其他几个 JS 文件。

但是，当我运行 encore 时，出现“找不到此依赖项”错误。

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

我得到的错误是

未找到此依赖项：

• ./theme/js/scripts.js 中的站点

要安装它，您可以运行： npm install --save Site

我不认为它可以“安装”，因为这是我拥有的主题的一部分的依赖项。

不幸的是，我无法更改 ./theme 中任何文件中的代码所以我想知道是否有办法在 Webpack Encore 中加载依赖项？

在传统的 webpack 配置中，我会执行以下操作：

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

但是我怎样才能用 Webpack Encore 导入这些呢？

Answer 1

目前看来 webpack encore 没有提供任何添加辅助函数的语法。

根据这里的评论https://github.com/symfony/webpack-encore/issues/37 ，解决方案如下：

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

在 ES6 中，您可以使用模块。 解决方案是利用 ES6 的语法、import 和 export 语句，这是一种优雅且可维护的方法，使我们能够将事物分开，并且仅在需要时才可用。