babel7,Typescript,webpack4不能将Typescript转换成Javascript

我试图用新的方式实现一个基线babel7+Typescript配置,这样babel7将剥离Typescript类型并绑定Javascript。

作为一个工具链新手,我似乎不得不设置路障,无法正确地解决问题,更不用说解决方案了。或者换言之,我似乎没有从互联网上找到一个好的起点项目,也没有自己构建一个项目,这样我就可以迭代到一个更全面的解决方案,比如缩小和浏览器列表填充。

似乎开始是最困难的一个,所以我希望某人的眼睛训练得更好,也许可以提供一个如何得到的提示

here (这是ASP.NET核心,但网络事物也应该在没有它的情况下运行)。特别是 webpack.config.js 看起来像

const path = require("path");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const bundleOutputDir = "./wwwroot/dist";

module.exports = (env) =>
{
    const isDevBuild = !(env && env.prod);
return [{
mode: isDevBuild ? "development" : "production",
stats: { modules: false },
resolve: {
  extensions: [".ts", ".js"],
  modules: ["App", "node_modules"]
},
output: {
  path: path.resolve(bundleOutputDir),
  publicPath: "dist/",
  filename: "[name].js"
},
module: {
  rules: [
    { test: /\.ts$/i, include: /App/, use: "ts-loader?silent=true" },
    { test: /\.html$/i, use: "html-loader" },
    { test: /\.css$/i, use: isDevBuild ? "css-loader" : "css-loader?minimize" },
    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" }
  ]
},
plugins: [
  new webpack.optimize.ModuleConcatenationPlugin(),
  new BundleAnalyzerPlugin({ analyzerMode: "static", reportFilename: "./../../bundle_report.html" }),
  new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) })
].concat(isDevBuild ? [
  new webpack.SourceMapDevToolPlugin({
    filename: "[file].map",
    noSources: true,
    moduleFilenameTemplate: path.relative(bundleOutputDir, "[resourcePath]")
  })
] : [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        ie8: false,
        ecma: 8
      },
      output: {
        comments: false,
        beautify: false
      },
      compress: false,
      warnings: false,
      parallel: {
        cache: true
      }
    })
  ])
  }];
};

1. 既然不能生产,那又有什么问题呢 App.js wwwroot/dist ?
2. 注意,我应该删除 丑陋的 和配置 巴别塔预设迷你 (包括包装)。
3. 请注意,我想要最完整的打印图。

<编辑:为了更新,网络上的一些东西看起来有点过时了。作为提示,我会调查

• babel-loader (Webpack) 和
• wanago.io Webpack 4 course 这似乎是一个很好的例子。:)

<编辑:以防有人在这里绊倒 terser-webpack-plugin 可能是Webpack的最佳选择 might a problem with babel-minify-webpack-plugin .

<编辑:这是一个从示例TS文件生成jsotuput的粗糙版本。GH中的规范将在稍后进行修订。

const path = require("path");
const webpack = require("webpack");
const bundleOutputDir = "./wwwroot/dist";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
    mode: isDevBuild ? "development" : "production",
    stats: { modules: false },
    entry: {
        app: './App/App'
    },
    output: {
        path: path.resolve(bundleOutputDir),
        publicPath: "dist",
        filename: "[name].js"
    },
    resolve: {
        extensions: [".ts", ".js", ".json"],
        modules: ["App", "node_modules"]
    },
    module: {
        rules: [
            { test: /\.(ts)|(js)$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } },
            { test: /\.html$/i, use: "html-loader" },
            //{ test: /\.css$/i, use: isDevBuild ? "css-loader" : "css-loader?minimize" },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" },
            { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
            { test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, "css-loader"] }
        ]
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
        new webpack.NoEmitOnErrorsPlugin(),
        new MiniCssExtractPlugin(
            {
                filename: "[name].css",
                chunkFilename: "[id].css"
            })
    ].concat(isDevBuild ? [
        new webpack.SourceMapDevToolPlugin({
            filename: "[file].map",
            noSources: true,
            moduleFilenameTemplate: path.relative(bundleOutputDir, "[resourcePath]")
        })
    ] : [
            new webpack.optimize.UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    ie8: false,
                    ecma: 8
                },
                output: {
                    comments: false,
                    beautify: false
                },
                compress: false,
                warnings: false,
                parallel: {
                    cache: true
                }
            })
        ])
}];
};