[译]webpack官网文档 ：概念 -- 10.目标

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/concepts/dependency-graph/

 

因为JavaScript即可以编写服务器端程序也可以编写客户端程序，webpack提供了多个部署目标，你可以在webpack配置文件里设定。

 

用法

只要简单的在webpack配置文件里设定target值，就可以设定target属性：

webpack.config.js

module.exports ={
  target:'node'
};

  

在上面的例子里，使用了node，webpack将按照可以在类Node.js环境里使用的方式编译它（使用Node.js require来加载代码块，并且不会触及模块里的任何built，像fs或者path）。

每一个目标里都有一个包含部署/环境等多样的详细附加设定，来支持它满足需要。

 

多个目标

尽管webpack不支持给target属性传递多个字符串，你可以通过绑定两个独立的配置文件，做成一个同构的库。

webpack.config.js

var path =require('path');
var serverConfig ={
  target:'node',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'lib.node.js'
  }
  //…
};
 
var clientConfig ={
  target:'web',// <=== can be omitted as default is 'web'
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'lib.js'
  }
  //…
};
 
module.exports =[ serverConfig, clientConfig ];

 

上面的例子在你的dist文件夹里做成了lib.js和lib.node.js两个文件。

 

资源

从上面的选项配置里可以看出，有多个不同的部署目标可以选择。下面是一个例子和资源的列表，可以参照。

（译者注：原文是TODO）

 

绑定输出比较

compare-webpack-target-bundles:一个用来测试和检查不同webpack目标的非常好的工具。对Bug报告也很有帮助。

 

-- End --