Webpack 开发服务器将运行时模块包含到入门包中

Question

我有一个非常简单的 webpack 配置，将一个 Typescript 文件作为条目（部分配置）...

config.entry = {
    launchEventsJS: {
      import: "./src/taskpane/launchEventsJS.ts",
      filename: getScriptName(dev),
    },
  };

webpack-dev-server 配置如下...

const getDevServerConfig = async (): Promise<webpackDevServer.Configuration> => {
  return {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    server: {
      type: "https",
      options: await devCerts.getHttpsServerOptions(),
    },
    port: 3000,
  };
}

当我使用 webpack 命令运行此配置时

webpack --mode development

我得到了一个小型转译 JavaScript 文件的预期结果（这正是我所需要的）...

同时，当我使用 webpack-dev-server 运行相同的配置来运行开发服务器并使用命令

"webpack-dev-server --mode development

托管 JavaScript 文件时，我得到了捆绑文件，其中包含开发服务器依赖项到转译的 JavaScript 文件中。 。

如何摆脱转译的 JavaScript 文件中包含的运行时依赖项？是否有任何必须添加的

webpack-dev-server

配置设置？

Answer 1

参见 拆分块：示例 2

创建一个

vendors

块，其中包含整个应用程序中

node_modules

中的所有代码。

这样，

./node_modules/webpack-dev-server

、

./node_modules/html-entities

和

./node_modules/webpack/hot

模块将从

index.js

捆绑文件中分离出来。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [new HtmlWebpackPlugin()],
    devServer: {
        static: './dist',
        client: {
            overlay: true,
        },
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },
};

webpack serve

日志：

> webpack serve

asset vendors.js 218 KiB [emitted] (name: vendors) (id hint: commons)
asset runtime.js 44.4 KiB [emitted] (name: runtime)
asset index.js 1.4 KiB [emitted] (name: index)
asset index.html 312 bytes [emitted]
Entrypoint index 264 KiB = runtime.js 44.4 KiB vendors.js 218 KiB index.js 1.4 KiB
runtime modules 29.2 KiB 13 modules
modules by path ./node_modules/ 173 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.86 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
    ./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
    ./node_modules/html-entities/lib/numeric-unicode-map.js 389 bytes [built] [code generated]
    ./node_modules/html-entities/lib/surrogate-pairs.js 583 bytes [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.js 27 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 312 ms
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.10.197:8081/
<i> [webpack-dev-server] Content not from webpack is served from './dist' directory