0

我正在尝试为旧版 SPA 引入 webpack。我与本文的作者处于非常相似的位置，我已将他们的代码改编为 webpack v4。

该应用程序需要全局定义 myApp ，所以我公开myApp如下：

应用程序.js

export var myApp = angular.module('app', ['ui.router']);

webpack.config.js

module.exports = {
    entry: './client/entryPoint.js',
    module: {
        rules: [
            {
                test: /app\.js$/,
                loader: 'expose-loader',
                options: {
                    exposes: {
                        globalName: 'entry'
                    },
                }
            }
        ]
    },

通过添加一些额外的代码，这可以完美地递归地“注入”该全局变量：

entryPoint.js

function importAll (r) {
    r.keys().forEach(function(file) {
        if (!file.includes('app.js')) {
            r(file);
        }
    });
}
importAll(require.context("imports-loader?additionalCode=var%20myApp%20=%20entry.myApp;!./app/", true, /.*\.js/));

这不起作用在以下定义它webpack.config.js：

webpack.config.js

module.exports = {
    entry: './client/entryPoint.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(app\.js|entryPoint\.js|node_modules)/,
                loader: 'imports-loader',
                options: {
                    additionalCode: 'var myApp = entry.myApp;'
                }

            },
            {
                test: /app\.js$/,
                loader: 'expose-loader',
                options: {
                    exposes: {
                        globalName: 'entry'
                    },
                }
            }
        ]
    },

在检查包时，webpack 没有additionalCode 像使用内联导入加载器时那样添加。

任何指向配置翻译出错的指针？

编辑 2020 年 10 月 8 日

这是我的应用程序的结构：

.
├── client
│   ├── app
│   │   ├── app.js
│   │   ├── home
│   │   │   ├── about.html
│   │   │   └── about.js
│   │   ├── landing.html
│   │   └── landing.js
│   ├── index.html
│   └── entryPoint.js
├── dist...
├── package.json
├── node_modules...
└── webpack.config.js

角度控制器期望 myApp 像这样定义，例如：

登陆.js

myApp.controller('LandingCtrl', function($http){
    ...
}
4

0 回答 0