Webpack 和 TypeScript - 没有转译和缺失代码

Question

这让我发疯了。

我有一个非常简单的 webpack/typescript 设置，但由于某种原因，在输出包中没有转译到 ES5 并且模块不包含在包中。

更烦人的是，我还有另一个项目，其设置完全相同，并且可以正常工作。

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    },
    "exclude": [ "node_modules" ]
}

webpack.config.js

module.exports = {
    entry: './lib/main.ts',
    output: {
        filename: './assets/js/bundle.js'
    },
    resolve: {
        extensions: ['', '.ts']
    },
    modules: {
        loaders: [
            { test: /.ts$/, loader: 'awesome-typescript-loader' }
        ]
    }
}

main.ts

import { thing } from './thing';
console.log(thing.foo);

thing.ts

export const thing = {
    foo: 'bar'
}

bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    import { thing } from './thing';
    console.log(thing.foo);

/***/ }
/******/ ]);

Answer 1

清醒地再看一遍后想通了。

我的 webpack.config.js 有一个 modules 属性，而不是 module 属性。

你这该死的胖手指！