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

【问题标题】：Webpack Encore: cannot import local dependenciesWebpack Encore：无法导入本地依赖项
【发布时间】：2020-08-13 19:31:38
【问题描述】：

我想为一个 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 导入这些？

【问题讨论】：

标签： javascript symfony webpack webpack-encore

【解决方案1】：

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

根据https://github.com/symfony/webpack-encore/issues/37 此处的 cmets，解决方案如下：

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;

【讨论】：

【解决方案2】：

在 ES6 中你可以使用模块。解决方案是利用 ES6 的语法、导入和导出语句，这是一种优雅且可维护的方法，允许我们将事物分开，并且仅在需要时可用。

【讨论】：