not working for es module #91

[epubreader]

the webpack example is out of date, after I convert to es module, it has many errors.

Did you mean to import "@marko/webpack/plugin.js"?
at finalizeResolution (node:internal/modules/esm/resolve:265:11)
at moduleResolve (node:internal/modules/esm/resolve:933:10)
at defaultResolve (node:internal/modules/esm/resolve:1169:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:542:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
at ModuleWrap. (node:internal/modules/esm/module_job:96:40)
at link (node:internal/modules/esm/module_job:95:36) {
code: 'ERR_MODULE_NOT_FOUND',

`
import path from 'path';
import webpack from 'webpack';
import nodeExternals from 'webpack-node-externals';
import CSSExtractPlugin from 'mini-css-extract-plugin';
import MarkoPlugin from '@marko/webpack/plugin';
import SpawnServerPlugin from 'spawn-server-webpack-plugin';
import MinifyCSSPlugin from 'css-minimizer-webpack-plugin';

const markoPlugin = new MarkoPlugin();
const { NODE_ENV = 'development' } = process.env;
const isDev = NODE_ENV === 'development';
const isProd = !isDev;
const filenameTemplate = ${isProd ? '' : [name].}[contenthash:8];
const spawnedServer =
isDev &&
new SpawnServerPlugin({
args: [
'--enable-source-maps',
// Allow debugging spawned server with the INSPECT=1 env var.
process.env.INSPECT && '--inspect',
].filter(Boolean),
});

const compiler = (config) => ({
...config,
mode: isProd ? 'production' : 'development',
stats: isDev && 'minimal',
cache: {
type: 'filesystem',
},
output: {
...config.output,
publicPath: '/assets/',
assetModuleFilename: ${filenameTemplate}[ext][query],
},
resolve: {
extensions: ['.js', '.json'],
},
module: {
rules: [
...config.module.rules,
{
test: /.marko$/,
loader: '@marko/webpack/loader',
},
],
},
plugins: config.plugins.filter(Boolean),
});

export default [
compiler({
name: 'browser',
target: 'web',
devtool: isProd
? 'cheap-module-source-map'
: 'eval-cheap-module-source-map',
output: {
filename: ${filenameTemplate}.js,
path: path.join(__dirname, 'dist/assets'),
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: 3,
},
},
devServer: isProd
? undefined
: {
hot: false,
static: false,
host: '0.0.0.0',
allowedHosts: 'all',
port: parseInt(process.env.PORT || 3000, 10),
headers: {
'Access-Control-Allow-Origin': '*',
},
...spawnedServer.devServerConfig,
},
module: {
rules: [
{
test: /.css$/,
use: [CSSExtractPlugin.loader, 'css-loader'],
},
{
test: /.(jpg|jpeg|gif|png|svg)$/,
type: 'asset',
},
],
},
plugins: [
markoPlugin.browser,
new webpack.DefinePlugin({
'typeof window': "'object'",
}),
new CSSExtractPlugin({
filename: ${filenameTemplate}.css,
ignoreOrder: true,
}),
isProd && new MinifyCSSPlugin(),
],
}),
compiler({
name: 'server',
target: 'async-node',
devtool: 'inline-nosources-cheap-module-source-map',
externals: [
// Exclude node_modules, but ensure non js files are bundled.
// Eg: .marko, .css, etc.
nodeExternals({
allowlist: [/.(?!(?:js|json)$)[^.]+$/],
}),
],
optimization: {
minimize: false,
},
output: {
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'dist'),
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
},
module: {
rules: [
{
test: /.(jpg|jpeg|gif|png|svg)$/,
generator: { emit: false },
type: 'asset/resource',
},
],
},
plugins: [
spawnedServer,
markoPlugin.server,
new webpack.IgnorePlugin({
resourceRegExp: /.css$/,
}),
new webpack.DefinePlugin({
'typeof window': "'undefined'",
}),
],
}),
];
`