Webpack - 构建两个库

Question

我是 webpack 3 的新手。我正在开发一个项目，我们想要将其拆分为两个库：AppLibrary 和 MyLibrary。

我的目的是能够构建这两个文件：

<script src="./MyLibrary.js"></script>
<script src="./AppLibrary.js"></script>
<script>

new AppLibrary(MyLibrary);

</script>

我想仅使用一个 webpack 命令进行构建，而不是使用两个命令构建库。

因为我不知道该怎么做，所以我有两个 webpack.config 文件。一份用于 AppLibrary，另一份用于 MyLibrary。

appLibrary.webpack.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/App/app.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|device)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'AppLibrary'
  }
};

库.webpack.js

const path = require('path');

module.exports = {
  entry: {
    library: './src/Library/Library.js'
  },
  externals: {
    "some": "some"
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|externals)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'MyLibrary'
  }
};

目前我需要执行两个命令来输出两个库。有什么办法可以处理这种情况吗？

文件夹结构如下：

- src
  |
  |- /dist
  |-- library.js
  |-- app.js
  |
  |- /Library
  |-- library.webpack.js
  |
  |- /App
  |-- app.webpack.js

Answer 1

所有导出的库的选项都相同

要使用单个配置文件导出多个文件，请尝试在单个webpack.config.js.

以下示例应位于 src 中，并将两个包放入 dist 文件夹中。

entry: {
  app: "./App/app.js",
  library: "./Library/Library.js"
},
output: {
  filename: "[name].js",
  path: path.resolve(__dirname, "dist")
}

导出的库的选项不同

要将多个配置添加到 webpack 配置文件中，可以使用数组。运行 webpack 时，会构建所有配置。（注意后面的方括号module.exports =）

（从 webpack 3.1.0 开始支持）

module.exports = [
{
  entry: {
    app: "./App/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}, 
{
  entry: {
    library: "./Library/Library.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}]