是否可以在一个 webpack.config 中打包两个不同的模块？

Posted 2023-03-08

【中文标题】是否可以在一个 webpack.config 中打包两个不同的模块？

【英文标题】：Is it possible to pack two different modules in one webpack.config?

【发布时间】：2019-11-17 05:53:04

【问题描述】：

我有一个 JS 代码，它在 src 文件夹下保存了两个模块。

awsdk：具有主要模型和服务的主要业务逻辑 awfre：像一个子模块，使用第一个和一些新的业务逻辑。

我们希望webpack 有两个 JS 文件，每个文件夹一个（如上所述），这可能吗？

注意：我正在使用 webpack v.^3.10.0

编辑： 这是我的webpack.config.js 文件：

const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const fs = require('fs');

const banner = `$pkg.name - $pkg.version - (c) 2017 - $pkg.author - $pkg.homepage \n\n $fs.readFileSync('LICENSE').toString()`;

module.exports = 
  entry: './src/index.js',
  output: 
    path: path.resolve(__dirname, './awsdk_module/lib/'),
    filename: 'awsdk.js',
    library: 'awsdk',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  ,
  devtool: 'source-map',
  module: 
    noParse: [/dtrace-provider$/, /safe-json-stringify$/, /mv/],
    rules: [
      
        test: /\.js$/,
        include: path.join(__dirname, './src/awsdk'),
        exclude: /node_modules/,
        use: 
          loader: 'babel-loader',
        ,
      ,
      
        test: /\.js$/,
        include: path.join(__dirname, './specs'),
        exclude: /node_modules/,
        use: 
          loader: 'babel-loader',
        ,
      ,
    ],
  ,
  node: 
    console: false,
    fs: 'empty',
    net: 'empty',
    module: 'empty',
    tls: 'empty',
  ,
  devServer: 
    contentBase: path.join(__dirname, './specs'),
    inline: true,
    port: 8081,
  ,
  plugins: [
    new webpack.BannerPlugin(banner),
  ],
;

【问题讨论】：

使用两个入口文件？

@UniqIdentifierAssignedAtBirth 是的，每个文件夹都有自己的条目

您可以使用 splitChunks 将它们中的每一个拉到自己的文件中，但这并不能保证独立性。如果你想要两个包完全独立，你可以在多编译器模式下运行 webpack，你可以同时独立地构建两个模块。 github.com/webpack/webpack/tree/master/examples/multi-compiler

【参考方案1】：

Webpack 通过 entry 配置字段支持多个输出。

给它一个对象。像这样的：

  entry: 
    awsdk: require.resolve(__dirname, './awsdk/index.js'),
    awfre: require.resolve(__dirname, './awfre/index.js')
  

您还需要更新 output.filename 以使用 [name] 占位符：

output: 
  filename: "[name].js"

请注意，默认情况下，webpack v4 会尝试将共享依赖项提取到“供应商”包中，因此您最终可能会得到比您提供的条目更多的输出包。

【讨论】：

我运行了你的代码，我得到：ERROR in chunk awfre [entry] awsdk.js Conflict: Multiple assets emit to the same filename awsdk.js，我需要修改文件中的更多字段吗？

请分享您的配置。可能您将输出设置为固定文件名而不使用占位符。见：***.com/q/42148632/2039244

我用我的原始配置文件更新了我的问题。可以的话请指教。

@roeygol 我已经用一个额外的步骤（使用[name] 占位符）更新了我的答案，应该可以解决您的问题。