[译]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 --

 

相关推荐