Webpack Encore:无法导入本地依赖项 [英] Webpack Encore: cannot import local dependencies

问题描述

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

I want to add an entry for a JS file which in turn imports several other JS files.

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

However when I run encore I get a "This dependency was not found" error.

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

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

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

I don't think it can be "installed" as this is a dependency which is part of a theme that I have.

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

Unfortunately I cannot change the code in any of the files in ./theme So I am wondering if there a way to load the dependencies in Webpack Encore?

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

In the traditional webpack config I would have done the following:

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

但是我如何使用 Webpack Encore 导入这些?

But how can I import these with Webpack Encore?

推荐答案

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

It seems like that at the current moment webpack encore does not offer any syntax for adding helper functions.

基于这里的评论 https://github.com/symfony/webpack-encore/issues/37 解决方案如下:

Based on the comments here https://github.com/symfony/webpack-encore/issues/37 the solution would be following:

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;

这篇关于Webpack Encore:无法导入本地依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！