webpack - 导出未定义 webpack 4

Question

我正在使用 webpack 4 来捆绑应用程序资源。

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types":  ["node"], 
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
    "compileOnSave": true,
    "exclude": [
       "node_modules"    
    ]
}

webpack.config.js:

module.exports = require("./config/webpack.dev.js");

webpack.common.js:

//common webpack configuration
var webpack = require("webpack");
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var helpers = require("./helpers.js");

module.exports = {
//the entry-point files that define the bundles
entry: {
    "polyfills": "./scripts/polyfills.ts",
    "vendor": "./scripts/vendor.ts",
    "main": "./scripts/main.ts"
},
//resolve file names when they lack extensions
resolve: {
    extensions: [".ts", ".js"]
},
target: "node",
//decide how files are loaded
module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: [
                {
                    loader: "awesome-typescript-loader",
                    options: {
                        configFileName: helpers.root("./scripts", "tsconfig.json")
                    }                        
                }, "angular2-template-loader"
            ]
        },
        {
            test: /\.html$/,
            loader: "html-loader"
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: "file-loader?name=assets/[name].[hash].[ext]"
        },
        {
            test: /\.css$/,
            exclude: helpers.root("./scripts", "app"),
            loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?sourceMap" })
        },
        {
            test: /\.css$/,
            include: helpers.root("./scripts", "app"),
            loader: "raw-loader"
        }
    ]
},
plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /\@angular(\\|\/)core(\\|\/)esm5/,
        helpers.root("./scripts"), // location of your src
        {} // a map of your routes
    ),
    //replaced by optimization.splitChunks for webpack 4
  //        new webpack.optimize.CommonsChunkPlugin({
  //            name: ["app", "vendor", "polyfills"]
  //        }),

    new HtmlWebpackPlugin({
        template: "./Views/Shared/_Layout.cshtml",
        filename: "index.cshtml",
        alwaysWriteToDisk: true
    }),
    new HtmlWebpackHarddiskPlugin({            
    })
],
optimization: {
    splitChunks : {
        chunks: "async",
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
   }
  }

webpack.dev.js:

//development webpack configuration
var webpackMerge = require("webpack-merge");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var commonConfig = require("./webpack.common.js");
var helpers = require("./helpers.js");

   module.exports = webpackMerge(commonConfig, {
devtool: "cheap-module-eval-source-map",

output: {
    path: helpers.root("Views"),
    publicPath: "scripts/",
    filename: "[name].js",
    chunkFilename: "[id].chunk.js"
},

plugins: [
    new ExtractTextPlugin("[name].css")
],

devServer: {
    historyApiFallback: true,
    stats: "minimal"
}
});

我正在使用 angular5，并且我已按照官方快速入门指南构建 webpack 配置。 Webpack 使用“npm start”命令(开发配置)成功编译，并且 index.cshtml 注入(inject)了我想要的所有 3 个文件:
1.polyfills.js
2. vendor .js
3. main.js

问题是从浏览器加载这些文件时出现以下错误:

polyfills.ts:2 Uncaught ReferenceError: exports is not defined
at polyfills.ts:2
(anonymous) @ polyfills.ts:2
vendor.ts:1 Uncaught ReferenceError: exports is not defined
at vendor.ts:1
(anonymous) @ vendor.ts:1
main.js:2 Uncaught ReferenceError: exports is not defined
at main.js:2
(anonymous) @ main.js:2

谁能帮我配置有什么问题？

Answer 1

将此添加到 babel config plugins 将解决此问题:

["@babel/plugin-transform-modules-commonjs"]