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

Question

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

然而，当我运行再来一次时，我得到一个 "This dependency was not found" 错误。

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

我收到的错误是

This dependency was not found:

Site in ./theme/js/scripts.js

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

我不认为它可以 "installed" 因为这是一个依赖项，它是我拥有的主题的一部分。

不幸的是，我无法更改 ./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 的语法、导入和导出语句，这是一种优雅且可维护的方法，使我们能够将事物分开，并且仅在我们需要时才可用。

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

Webpack Encore: cannot import local dependencies

javascript

symfony

webpack

webpack-encore