我正在用typescript编写一个模块，然后我使用Webpack5将其转换为js。
我的es模块非常简单 my.module.ts 详情如下：
export class SampleModule {
constructor(element: Element) {
this.el = element;
}
private el: Element;
logElement(): void {
console.log(this.el);
}
}通过网页包5生成js
(()=>{"use strict";!function(){function t(t){this.el=t}t.prototype.logElement=function(){console.log(this.el)}}()})();当我想使用它时：
<body>
<div class="container">
</div>
<script type="module" src="sample1.js"></script>
</body>samle1.js
import { SampleModule } from '../dist/sample.js'
new SampleModule(document.querySelector('[data-name="dtp1"]'));但是我得到了以下错误
Uncaught SyntaxError: The requested module '../dist/sample.js' does not provide an export named 'SampleModule'webpack.config.js
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
entry: {
'sample': './src/sample.ts'
},
devtool: 'source-map',
mode: 'production',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}, {
test: /.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {}
},
'css-loader'
],
}],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
externals: {
bootstrap: 'bootstrap',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
watch: false,
devServer: {
lazy: false,
watchContentBase: true
},
optimization: {
minimizer: [
new TerserPlugin({
extractComments: false,
}),
new CssMinimizerPlugin(),
],
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.BannerPlugin({
banner: `
version : 4.0.0
`
})
]
};
暂无答案！
目前还没有任何答案，快来回答吧！