如何让 webpack 在新创建的目录中编译我新创建的文件

Question

我修改了thingboard ui并创建了一个新目录“model-publish”并在./ui/src/app/下创建了一些文件。

下面的文件树

./ui/src/app/model-publish/
├── index.js
├── model-publish.routes.js
└── model-publish.tpl.html

index.js：

import ModelPublishRoutes from './model-publish.routes';

export default angular.module('thingsboard.modelPublish', [])
    .config(ModelPublishRoutes)
    .name;

model-publish.routes.js：

import modelPublishTemplate from './model-publish.tpl.html'

/* eslint-enable import/no-unresolved, import/default */

/*@ngInject*/
export default function ModelPublishRoutes($stateProvider) {
    $stateProvider
        .state('home.modelPublishes', {
            url: '/modelPublish',
            module: 'private',
            auth: ['TENANT_ADMIN'],
            views: {
                "content@home": {
                    templateUrl: modelPublishTemplate
                }
            },
            data: {
                searchEnabled: false,
                pageTitle: 'audit-log.audit-logs'
            },
            ncyBreadcrumb: {
                label: '{"icon": "track_changes", "label": "audit-log.audit-logs"}'
            }
        });
}

模型发布.tpl.html：

<h1>model publish</h1>

当我 npm start 时，我发现 model-publish 目录中的 js 文件未编译。

但是如果我把 js 文件放在已经存在的目录中，它们就会被正确编译。

我是前端开发的新人，很困惑，Webpack或Angularjs不会在编译时自动搜索src/app/中的所有目录和文件吗？

如何让 webpack 在新创建的目录中编译我新创建的文件。

提前致谢。

Answer 1

我敢打赌，你不会在任何地方导入那个新文件夹。

Webpack 通过查看入口点文件并找到其中引用的所有导入来工作。然后它会找到这些导入引用的任何导入，依此类推，直到找到所有依赖项。如果你的入口文件没有直接或间接引用那个新文件夹，那么 webpack 就无法知道它的存在。