Question

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

然而，当我运行安可时，我得到一个“找不到此依赖关系”错误。

webpack.config.js

...

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

...

./主题/ JS / scripts.js中

import * as Site from 'Site'

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

./主题/ 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安可不提供任何添加辅助函数的语法。

根据此处的评论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：无法导入本地依赖项

2 个答案: