javascript - webpack 可以为浏览器和 Node 输出单独的脚本和模块文件吗？

Question

我正在使用 webpack 制作一个可以由浏览器加载的 JavaScript 对象(在 script 标签中)，但我也希望 webpack 制作一个可以由 Node 加载的模块(需要 module.exports = )。

有没有办法让webpack制作两个文件；例如project.js 和 project.node.js？或者我以错误的方式处理这个问题？

D3 JavaScript 库似乎正在基于其 package.json 做类似的事情

{
  "main": "build/d3.node.js",
  "browser": "build/d3.js",
   ...
}

Answer 1

我找到了如何让webpack制作多个文件here - 基本上只是导出一组对象，而不仅仅是 webpack.config.js 中的一个。

下面是 webpack.config.js，我在其中使用相同的入口点 main.js 创建多个文件。

module.exports = [
  {
      entry: './src/main.js',
      output: {
        path: __dirname,
        filename: 'my_project.js',
        libraryTarget: 'var',
        library: 'my_project'
      },
      ... 
  },
  {
      entry: './src/main.js',
      output: {
        path: __dirname,
        filename: 'my_project.node.js',
        libraryTarget: 'commonjs2',
        library: 'my_project'
      }
      ...
];

我正在创建两个文件:1)my_project.js，其中libraryTarget设置为var，以便浏览器可以加载它使用脚本标记和 2) my_project.node.js 将 libraryTarget 设置为 commonjs2 以便 Node 可以加载它。

我将 my_project.node.js 放在 package.json 的 main 下，以便 webpack 加载它 - 见下文:

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "something ...",
  "main": "my_project.node.js",
  ... 
}