javascript - Webpack Encore : cannot import local dependencies

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

我得到的错误是

This dependency was not found:

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

To install it, you can run: 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;