Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the configuration instructions of Webpack. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

CLI

If you use CLI, webpack will read webpack.config.js by default (or point to the read file through the-- config option), which needs to export a configuration object.

Module.exports = {

/ / configuration

}

Node.js API

If you use node.js API, you need to pass the configuration object as a parameter:

Webpack ({

/ / configuration

}, callback)

Multiple configuration object

In both methods, you can use an array of configuration objects to execute in parallel. They share data caches and listeners, which is more efficient than performing webpack multiple times.

Configure object content

Tip: remember not to write pure json objects in the configuration object, you can use any js method you want, it's just a nodejs module.

A simple example:

{

Context: _ _ dirname + "/ app"

Entry: ". / entry"

Output: {

Path: _ _ dirname + "/ dist"

Filename: "bundle.js"

}

}

Context

The base directory (absolute path) used to parse the entry option. If output.pathinfo is set, it contains the shortened directory; (equivalent to the public directory, all the following directories are under this public directory)

Default: process.cwd ()

Entry

Entry point for bundle.

If you pass in a string, the string is parsed to the module loaded at startup.

If you pass in an array, all modules are loaded at startup and exported to the last one.

Entry: [". / entry1", ". / entry2"]

If you pass in an object, multiple input package files will be created. The key value of the object is the name of chunk. The value can be a string or an array.

{

Entry: {

Page1: ". / page1"

Page2: [". / entry1", ". / entry2"]

}

Output: {

/ / when using multi-entry files, be sure to use [name] or [id] in output.filename

Filename: "[name] .bundle.js"

ChunkFilename: "[id] .bundle.js"

}

}

Note: there are no other options specifically for configuring entry points. If you need a configuration object dedicated to configuring the entry point, you need to use multiple configuration objects.

Output

Output is the option that affects the compiled output. The output option tells webpack how to write the compiled file to disk. Note that although there can be many inputs, there is only one output configuration

If you use hashes ([hash] or [chunkhash]), you need to ensure that there is a consistent module order. Use the OccurenceOrderPlugin plug-in or recordsPath. (see this issue)

Output.filename

Specifies the file name of the file output to the hard disk. This cannot be an absolute path! Output.path will determine the existence of the hard disk quota path for the file. Filename is only used to name each file.

This is the end of the article on "sample Analysis of Webpack configuration instructions". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.