javascript - Typescript 和 webpack

Question

我在使用 webpack 和 typescript 时遇到一些困难。我的项目中的不同文件夹中有许多 .ts 文件。早些时候，我没有使用像 commonjs 或 AMD 这样的模块系统，而是使用了 typescript 命名空间(模块关键字)。这些文件没有连接成一个文件。这意味着每个 .ts 文件附近都会生成 .js 文件，然后所有 .js 文件都包含在 HTML 中。

现在我尝试使用 webpack 和 ts-loader。

module.exports = {
    context: __dirname,
    entry: "app.ts",
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    resolve: {
         root: __dirname,
         extensions: ["", ".webpack.js", ".web.js", ".js",".ts", ".tsx"]
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            }
        ]
    }
}

在bundle.js文件中编译后，我只能找到app.ts编译的内容，而看不到所有其他文件。据我了解，这是因为我没有使用 import 关键字。 Webpack ts-loader 仅编译那些属于模块的文件。如果我启动 typescript 编译器，它将像之前一样编译我的项目中的所有文件。

问题是:如何在bundle.js中添加所有typescript文件，即使它们不是commonjs模块？ 谢谢。

Answer 1

不确定您能否获得不使用 CJS 或 UMD 的模块，但也许我不理解这个问题？如果您只想连接和捆绑您的 ts、tsx 文件，无论导入如何并且基于扩展名，您可以使用 ExtractTextPlugin 和相应的加载器。像这样的东西可能会起作用。

module: {
    loaders: [
        {
            test: /\.tsx?$/,
            loader: ExtractTextPlugin.extract('ts-loader')
        }
    ]
},
plugins: [
    new ExtractTextPlugin('typescript.[chunkhash].js', {
        disable: false,
        allChunks: true // extract all ts
    }),

这是documentation .