Webpack 部署目标

Question

因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种部署 target(目标)

想要设置 target 属性，只需要在 webpack 配置中设置 target 的值。

# webpack.config.js
module.exports = {
  // 使用 node，webpack 会编译为用于类 Node.js 环境（使用 Node.js 的 require ，而不是使用任意内置模块（如 fs 或 path）来加载 chunk）。
  target: 'node'
};

webpack 不支持向 target 传入多个字符串，但可以通过打包两个单独配置，来创建出一个同构的 library：

# webpack.config.js
const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};
const clientConfig = {
  target: 'web', // <=== 默认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};
module.exports = [ serverConfig, clientConfig ]; // 在 dist 文件夹下创建 lib.js 和 lib.node.js 文件

示例资源

• compare-webpack-target-bundles ：有关「测试和查看」不同的 webpack target 的大量资源。也有大量 bug 报告。
• Boilerplate of Electron-React Application ：一个 electron 主进程和渲染进程构建过程的很好的例子。