我正在使用Webpack 4来打包应用程序资源。
tsconfig.json:
我正在使用 Angular5，并遵循官方的快速入门指南构建 webpack 配置。使用 `npm start` 命令（开发配置）成功编译 webpack，并且 `index.cshtml` 注入了我想要的 3 个文件：
1. `polyfills.js` 2. `vendor.js` 3. `main.js`
问题在于，当这些文件从浏览器加载时，我会收到以下错误信息：
有人能帮我解决配置出了什么问题吗？
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 配置。使用 `npm start` 命令（开发配置）成功编译 webpack，并且 `index.cshtml` 注入了我想要的 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
有人能帮我解决配置出了什么问题吗？