[Translation] webpack official website documentation: Concepts -- 10. Goals

Original translation, please indicate the source when reprinting. 

Original address: https://webpack.js.org/concepts/dependency-graph/

 

Because JavaScript can write server-side programs as well as client-side programs, webpack provides multiple deployment targets, which you can set in the webpack configuration file.

 

usage

The target attribute can be set simply by setting the target value in the webpack configuration file :

webpack.config.js

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

  

In the above example, node is used , and webpack will compile it in a way that can be used in a Node.js -like environment (using Node.js require to load code blocks and not touching any built - in modules like fs or path ).

Each target has a variety of detailed additional settings including deployment / environment to support it as needed.

 

multiple goals

Although webpack does not support passing multiple strings to the target property, you can make an isomorphic library by binding two separate configuration files.

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 ];

 

The above example makes two files lib.js and lib.node.js in your dist folder .

 

resource

As can be seen from the above option configuration, there are several different deployment targets to choose from. Below is a list of examples and resources for reference.

(Translator's Note: The original text is TODO)

 

Binding output comparison

compare-webpack-target-bundles: A very nice tool for testing and checking different webpack targets. Also helpful for bug reporting.

 

-- End --