可以webpack为浏览器和节点输出单独的脚本和模块文件

can webpack output separate script and module files for browser and node?

本文关键字：脚本 模块 文件 单独 节点 webpack 浏览器 可以 输出      更新时间：2023-09-26

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

是否有办法让webpack制作两个文件;例如:a project.js和project.node.js ?还是我走错路了?

D3 JavaScript库似乎正在做这样的事情基于它的package.json 

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

我发现了如何让webpack在这里制作多个文件-基本上只是导出一个对象数组，而不仅仅是一个在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，以便节点可以加载它。

我把my_project.node.js放在package.json的main下面，这样webpack就会加载它——见下面:

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "something ...",
  "main": "my_project.node.js",
  ... 
}
相关文章：