Webpack 在 require.ensure typescript 文件时失败答案

【问题标题】：Webpack fails while require.ensure typescript fileWebpack 在 require.ensure typescript 文件时失败
【发布时间】：2017-12-19 16:54:48
【问题描述】：

在应用程序中，我定义我的状态如下：

$stateProvider
.state('index', {
    url: '/',
    controller: 'indexController',
    resolve: {
        foo: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
            let deferred = $q.defer();
            require.ensure([], function () {                                    
                let module = require('./index/test.ts')(angularRef);
                $ocLazyLoad.load({ name: 'myAppIndex' });               
                deferred.resolve(module);
            });         
            return deferred.promise;
        }]
   }
})

webpack 定义如下所示：

...
    module: {
    loaders: [
        {
            test: /\.js$/,
            use: [
                { loader: 'babel-loader', query: { compact: true } },
            ]
        },             
        { test: /\.ts?$/, loader: "ts-loader" },

        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } }
                ]
            })
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } },
                    { loader: 'sass-loader', query: { sourceMaps: false } }
                ]
            })
        }, {
            test: /\.html$/,
            loader: 'raw-loader',
            exclude: /node_modules/
        }
    ]
....

不要忘记 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015", "dom" ],
    "typeRoots": [
      "./node_modules/@types/"
    ],

    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

但是每次我用 webpack 编译脚本 "webpack-dev-server --inline --watch --devtool eval --progress --colors --content-base 视图"

我收到了这个错误

main.bundle.js:1 TypeError: webpack_require(...) 不是函数

'./index/test.ts' 被调用，里面有一个“console.log”被调用

所以最大的问题是，我做错了什么？

【问题讨论】：

标签： angularjs webpack angular-ui-router

【解决方案1】：

添加require 参数。 https://webpack.js.org/api/module-methods/#require-ensure

    require.ensure([], function (require) {                                    
        let module = require('./index/test.ts')(angularRef);
        $ocLazyLoad.load({ name: 'myAppIndex' });               
        deferred.resolve(module);
    });

【讨论】：

我一定会试试这个，但两天后（周末）。同时，这个 require 参数的目的是什么？如果我使用 .JS 文件执行此操作，一切都很好（即使没有这个 require 参数）
@Benjamin 可能有效，因为它被解释为普通静态 require。我在答案中添加了一个文档链接。
谢谢，这会起作用，我还必须将 oclazyload 更新到最新版本。唯一的问题是在这种情况下生成的块文件“0.js”在保存对应的打字稿文件时没有得到更新。 Webpack 再次开始编译，但是 chunk-file 还是一样，你知道哪里错了吗？
@Benjamin 如果您使用webpack-dev-serve，该文件将保存在内存中。
我忘了提到这段代码是从 VisualStudio 提供的，所以 VS 服务于网站（不是 webpack 的开发服务器），我不确定这是否可以结合 webpack-dev-server和 Visual Studio，我尝试将 webpack-dev-server 的端口更改为 Visual Studio 的端口，但这也没有用