节点 - 无法运行 Webpack 包

Posted 2023-03-13

【中文标题】节点 - 无法运行 Webpack 包

【英文标题】：Node - Fails to run Webpack bundles

【发布时间】：2019-06-09 15:08:50

【问题描述】：

我正在使用 webpack 捆绑我的应用程序，并确保将目标指定为“node”（否则 webpack 构建失败）。

使用我当前的配置构建成功，但是当我尝试使用节点运行它时出现错误：

C:\Users\myuser\Desktop\myproject\dist\app.js:20 /******/ modules[moduleId].call(module.exports, 模块, module.exports, webpack_require）； ^

TypeError：无法读取未定义的属性“调用”

它是指webpackBootstrap函数内部的一行注入到app.js的开头。感觉好像 node 与 Webpack 不兼容，尽管根据我的理解它应该是。

我怀疑它与问题有关，但为了让您了解全貌：

我正在转换 ts 并将 src 中的每个文件作为单独的块导出到 dist 中，而不是将所有内容捆绑在一起，以便在运行时按需动态导入文件。

例如：

src/app.ts src/compA.ts src/compB.ts

会变成：

dist/app.js dist/compA.js dist/compB.js

这是我的 webpack.config.js：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const  CheckerPlugin  = require('awesome-typescript-loader');
const glob = require('glob');

let entry = ;

glob.sync('./src/**/*.*').forEach(component => 
    let name = component.match(/.*\/(.*)\..*/)[1];

    entry[name] = component;
);

module.exports = 
    mode: 'development',
    entry,
    target: 'node',
    resolve: 
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    ,
    devtool: 'inline-source-map',
    devServer: 
        contentBase: './dist'
    ,
    module: 
        rules: [
            
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            
        ]
    ,
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new CheckerPlugin()
    ],
    output: 
        filename: (chunkData) => 
            let name = chunkData.chunk.name;
            let src = chunkData.chunk.entryModule.id;

            let path = src.split('/');
            let dir = path[path.length -2];
            let pathPrefix = dir !== 'src' ? dir + '/' : '';

            return pathPrefix + name + '.js';
        ,
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    ,
    optimization: 
        splitChunks: 
            chunks: 'all'
        ,
    ,
;

【参考方案1】：

我需要在配置中包含节点外部。

const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = 
  target: "node",
  entry: 
    app: ["./back.js"]
  ,
  output: 
    path: path.resolve(__dirname, "../build"),
    filename: "bundle-back.js"
  ,
  externals: [nodeExternals()],
;

https://medium.com/code-oil/webpack-javascript-bundling-for-both-front-end-and-back-end-b95f1b429810