在脚本中使用 webpack 2.2.1 解析路径中的 ts-loader

Question

给出以下 gulp 任务。我得到错误输出

Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'

gulp.task("admin:js", function (done) {
    module.exports = {
        context: "wwwroot/js/admin",
        entry: ["app.ts", "zippy.ts"],
        output: {
            filename: "admin.js"
        },
        devtool: "source-map",
        module: {
            rules: [
              { test: /\.ts$/, use: 'ts-loader' }
            ]
        }
    };
    webpack(module.exports).run(onBuild(done));
});

具有目录结构

wwwroot\js\admin\app.ts
wwwroot\js\admin\zippy.ts

我收到这个错误：

Version: webpack 2.2.1
Time: 31ms
       Asset     Size  Chunks             Chunk Names
    admin.js  2.87 kB       0  [emitted]  main
admin.js.map  2.61 kB       0  [emitted]  main
chunk    {0} admin.js, admin.js.map (main) 40 bytes [entry] [rendered]
    [0] multi app.ts zippy.ts 40 bytes {0} [built]

ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
 @ multi app.ts zippy.ts

ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'zippy.ts' in 'wwwroot/js/admin'
 @ multi app.ts zippy.ts

这是一个路径问题，就像我从命令行执行 webpack 一样，在 wwwroot\js\admin 目录中，没有上下文路径，文件被正确捆绑并且一切正常。

当我使用 API 脚本并从项目根目录（相对于 .\wwwroot\js\admin）执行时，我得到了错误输出。

Answer 1

webpack 不支持在context中使用相对路径 ] 配置项。

改变context如下：

module.exports = {
    context: __dirname + "/wwwroot/js/admin",
    ...

更正了输出。

Version: webpack 2.2.1
Time: 2337ms
       Asset     Size  Chunks                    Chunk Names
    admin.js  1.24 MB       0  [emitted]  [big]  main
admin.js.map  1.48 MB       0  [emitted]         main
chunk    {0} admin.js, admin.js.map (main) 1.24 MB [entry] [rendered]
    [0] ./~/angular/index.js 48 bytes {0} [built]
    [1] ./wwwroot/js/admin/app.ts 408 bytes {0} [built]
    [2] ./wwwroot/js/admin/zippy.ts 1.16 kB {0} [built]
    [3] ./~/angular/angular.js 1.24 MB {0} [built]
    [4] multi ./app.ts ./zippy.ts 40 bytes {0} [built]
[10:30:37] Finished 'admin:js' after 2.43 s

在脚本中使用 webpack 2.2.1 解析路径中的 ts-loader

resolving ts-loader in a path using webpack 2.2.1 in a script

javascript

node.js

gulp

webpack

webpack-2