Wepack 使用 ts-loader 强制包含 typescript 文件

Question

我已经开始使用 TypeScript 并尝试使用 Browserify（使用 tsify），它运行良好，直到我切换到 Webpack 以在我的项目中使用 vue 和 babel。

这是我的项目结构（经过简化，它也使用 ASP.NET 核心）：

BestAppEver
  ---| [C# stuff]
  ---| scripts
       ---| pages
               - Login.ts
               - Dashboard.ts
       ---| components
               - CoolThing.vue
       - App.ts
  - package.json
  - webpack.config.js
  - tsconfig.json

pages 中的文件通常包含 jquery 如下声明：

import * as $ from "jquery";
console.log("hi i got loaded!");
$("#deleteConfirmationInput").change(function() {
    if (isInputValid()) {
        $("#deleteConfirmationButton").removeAttr("disabled");
    } else {
        $("#deleteConfirmationButton").attr("disabled", "disabled");
    }
});

这是我的 webpack.config.js 文件

var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
    entry: './scripts/App.ts',
    mode: process.env.NODE_ENV || 'production',
    output: {
        path: path.resolve(__dirname, 'wwwroot/js'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            appendTsSuffixTo: [/\.vue$/]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        plugins: [
            new TsconfigPathsPlugin()
        ]
    }
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map'
}

if (process.env.NODE_ENV === 'production') {
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ]);
}

使用 Browserify 和 tsify，所有文件都包含在内，运行，所以 "hi i got loaded!" 被打印出来了。

使用 ts-loader，仅包含我 import编辑和使用的文件，运行。 不导入文件，"hi i got loaded!" 没有打印出来。 .vue 文件不是这种情况。

有没有办法自动导入这些文件并使它们全部运行在最终包中？

谢谢 :D

Answer 1

简单的答案正是您所发现的：您必须导入文件！ Webpack 只会从你命名为 entry (./scripts/App.ts) 的文件开始遍历文件树。 webpack 根本看不到其他任何东西。

请注意，您可以使用 "bare imports" 导入文件只是为了副作用：

import "./pages/Login.ts";

在这种情况下，您告诉 webpack 您不希望 Login.ts 导出任何内容，但文件应该包含在包中。您可以将这些裸导入放在 App.ts.

这个问题可能是相关的：

另一个选项是将 webpack 配置为使用 entry 的多个值。在您的情况下，您应该能够将 entry 定义为字符串数组：

entry: [
  './scripts/App.ts',
  './scripts/Pages/Login.ts',
  './scripts/Pages/Component.ts'
],

如果你想变聪明，你可以通过递归地列出scripts目录中的文件来动态生成它。 webpack.config.js 毕竟只是 javascript （节点）。如果有兴趣，我可以扩展答案以包括一个这样的例子。

Wepack 使用 ts-loader 强制包含 typescript 文件

Wepack force typescript files to be included using ts-loader

typescript

webpack

ts-loader