javascript - webpack:在解析模块之前必须手动执行 TSC

Question

下面粘贴了我的完整 webpack.config.js 以供引用。如果我删除应用程序目录中的所有 *.js 文件，则 webpack 会提示以下错误:

ERROR in ../main.ts Module not found: Error: Can't resolve './app/app.module' in 'C:\Projects\Github\Panda\Panda.CoreService\wwwroot\ts' @ ../main.ts 5:19-46 @ multi ../main.ts

它在正确的位置查找，错误中的相对路径看起来都是正确的。

如果另一方面，我执行tsc，然后执行webpack，模块都会被找到并构建，没有任何问题。这几乎就像 webpack 根本没有编译 typescript 一样。我尝试过回滚，但似乎无法解决。

目录结构

tsconfig.json
wwwroot\ts\main.ts
wwwroot\ts\app\app.module.ts
wwwroot\ts\webpack\webpack.config.js

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");

const config = {
    wwwroot: "../../../wwwroot",
    css: "../../../wwwroot/css",
    node: "../../../node_modules",
    admin: "../../../wwwroot/sass/src/"
};
config.scssInclude = [
    path.resolve(__dirname, config.node),
    path.resolve(__dirname, "../../../wwwroot")
];
console.log("------------------------------------------------------------");
console.log(config);
console.log("------------------------------------------------------------");

const configuration = {
    context: __dirname,
    entry: {
        "application": ["../main.ts"],
        "vendor": [
            "@angular/animations",
            "@angular/common",
            "@angular/common/http",
            "@angular/compiler",
            "@angular/core",
            "@angular/forms",
            "@angular/http",
            "@angular/platform-browser",
            "@angular/platform-browser-dynamic",
            "@angular/router",
            "ngx-logger",
            "jquery",
            "jquery-validation",
            "jquery-validation-unobtrusive",
            "bluebird",
            "moment",
            "ramda",
            "lodash",
            "reflect-metadata",
            "zone.js",
            "ng2-charts/ng2-charts",
            "ngx-bootstrap/dropdown",
            "ngx-bootstrap/tabs"
        ],
        "style": ["../../sass/src/application.scss"]
        //"site": ["../site/preload.js"],
        //"bootstrap": ["../../sass/bootstrap.scss"],
        //"print": ["../../sass/admin/print.scss"]
    },
    output: {
        path: path.join(__dirname, "../"),
        filename: "[name].js",
        chunkFilename: "[name].js",
        publicPath: "ts/"
    },
    devtool: "source-map",
    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.jquery": "jquery",
            //Promise: "bluebird",
            _: "lodash"
        }),
        new extractTextPlugin({
            // disable: false,
            disable: process.env.NODE_ENV != "production",
            filename: "../../wwwroot/css/[name].css",
            allChunks: true
        })
    ],
    resolve:
    {
        alias: {
            typeahead: "typeahead.js"
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ["ts-loader"],
                exclude: /(node_modules)/
            },
            {
                test: /\.scss|\.css$/,
                use: extractTextPlugin.extract({
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                includePaths: config.scssInclude,
                                sourceMap: true
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                                sourceMapContents: true,
                                precision: 10,
                                includePaths: config.scssInclude,
                                outputStyle: "nested"
                            }
                        }
                    ],
                    fallback: "style-loader"
                })
            },
            {
                test: /\.(eot|ttf|woff|woff2|svg)$/,
                exclude: [/wwwroot(\\|\/)fonts/,/wwwroot(\\|\/)images/],
                loader: "file-loader",
                options: {
                    name: "[name].[ext]",
                    outputPath: "../fonts/",
                    publicPath: "/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2|svg)$/,
                include: /wwwroot(\\|\/)fonts/,
                loader: "file-loader",
                options: {
                    emitFile: false,
                    name: "[name].[ext]",
                    outputPath: "../fonts/",
                    publicPath: "/"
                }
            },
            {
                test: /\.(svg|png|jpeg|gif)$/,
                include: /wwwroot(\\|\/)images/,
                exclude: /node_modules/,
                loader: "file-loader",
                options: {
                    emitFile: false,
                    name: "[name].[ext]",
                    publicPath: "../images/"
                }
            },
            {
                test: /\.(svg|png|jpeg|gif)$/,
                include: /sass(\\|\/)img/,
                exclude: /node_modules/,
                loader: "file-loader",
                options: {
                    emitFile: true,
                    name: "[name].[ext]",
                    outputPath: "../images/template/",
                    publicPath: "/"
                }
            },
            {
                test: require.resolve("jquery"),
                use: [
                    { loader: "expose-loader", options: "jQuery" },
                    { loader: "expose-loader", options: "$" }
                ]
            }
        ]
    }
};

console.log("------------------------------------------------------------");
console.log(configuration.module.rules);
console.log("------------------------------------------------------------");
module.exports = configuration;

ma​​in.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

/* additional scripts */
import "script-loader!./lib/jquery-resizable.js"
import "script-loader!./lib/tagsuggest.js"
import "./lib/tagsuggest.scss"

import "../fonts/proxima-nova.css";
import "../fonts/roboto.css";

// font awesome
import "font-awesome/scss/font-awesome.scss";

// simple line icons.
import "simple-line-icons/scss/simple-line-icons.scss";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

默认情况下，webpack 根本无法识别 *.ts 文件。我找到了解决方案here .

webpack 实际上只在编译时捆绑 js 文件，因为这是默认行为。

我需要在解析部分包含 *.ts.。

resolve:
{
    extensions: [".ts", ".js", ".json"],
},