我正在将Web应用程序升级到ASP.NET Core 3.0。我长期计划的任务之一是利用webpack之类的现代捆绑器。我认为尽管在<script>标签内使用了JavaScript代码，但我还是处理了所有情况。
如果您现在熟悉ASP.NET的内容，则可以直接跳过它。这个问题也适用于简单的HTML。
浏览该网站后，我总是得到的错误是：Uncaught SyntaxError: The requested module './dist/bundle.js' does not provide an export named 'exampleSite'
./ ts / example / index.ts
export default () => {
console.log('example site's init script has been called.');
}
bundle_body.js
import 'moment';
import 'jquery';
window.jQuery = $;
window.$ = $;
window.jquery = $;
import exampleSite from './ts/Example/index.ts'
// Exportet content from the bundle is also no working
// export { exampleSite}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env = {},argv = {}) => {
const isProd = argv.mode === 'production';
const config = {
mode: argv.mode || 'development',// we default to development when no 'mode' arg is passed
optimization: {
minimize: true
},entry: {
head: './wwwroot/src/bundle_head.js',body: './wwwroot/src/bundle_body.js',css: './wwwroot/src/bundle_css.js'
},output: {
filename: isProd ? 'bundle-[chunkHash].js' : '[name].js',path: path.resolve(__dirname,'./wwwroot/dist'),publicPath: "/dist/"
},plugins: [
new MiniCssExtractPlugin({
filename: isProd ? 'style-[contenthash].css' : 'style.css'
}),new CompressionPlugin({
filename: '[path].gz[query]',algorithm: 'gzip',test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,threshold: 10240,minRatio: 0.8
}),new HtmlWebpackPlugin({
chunks: ['head','body','css'],template: './Views/Shared/_LayoutTemplate.cshtml',filename: '../../Views/Shared/_Layout.cshtml',inject: false
})
],module: {
rules: [
{
test: /\.js$/,exclude: /node_modules/,use: {
loader: "babel-loader"
}
},{
test: /\.ts$/,use: 'ts-loader'
},{
test: /\.(sa|sc|c)ss$/,use: [
'style-loader',MiniCssExtractPlugin.loader,'css-loader','sass-loader'
]
},{
test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,loader: 'file-loader',options: {
name: '[name].[hash].[ext]',outputPath: 'assets/'
}
}
]
}
};
return config;
};
Layout.cshtml
<html>
<head>
<link href="<%= htmlWebpackPlugin.files.chunks.css.css %>" rel="stylesheet" />
<script src="<%= htmlWebpackPlugin.files.chunks.head.entry %>"></script>
</head>
<body>
...
<script src="<%= htmlWebpackPlugin.files.chunks.body.entry %>" type="module"></script>
@RenderSection("Scripts",required: false)
</body
</html>
Index.cshtml
<div>
...
</div>
@section Scripts
{
<script type="module">
import exampleSite from './dist/body.js'
exampleIndex();
</script>
}