Webpack entry and Output configuration properties

1, entry

Three ways to configure entry:

(1) Passing a string:

Single entry syntax: Passing a string

Entry: './src/js/main.js ',

(2) passing an array

Multiple primary portals (Multi-main entry) will be created and their dependency-oriented (graph) to a "chunk".

Entry: ['./src/js/main.js ', './src/js/a.js '],

example, the Webpack.config.js file is:

  { Span style= "color: #008000;" >//  packaging portal  entry: ['./src/js/main.js ', './src/js/a.js '  //        filename: ' Bundle.js '  //   path: __dirname, FileName:  './dist/js/bundle.js '     }}

Execute command:

NPM Run Webpack

The effect merges the file into a file, as follows:

(3) Passing objects

The Webpack.config.js file is:

Module.exports = {    //Packing Entranceentry: {main:'./src/js/main.js ', A:'./src/js/a.js '    },    //the packaged fileoutput: {//no __dirname will be an error .        //Path:__dirname + './dist/js ',        //filename: ' bundle.js '        //Error above 2 rows windowpath: __dirname,//Note: Use [name] to ensure that each file name is not duplicatedFileName: './dist/js/[name].js '    }}

Attention:

You should use the following substitution methods to ensure that each file name is not duplicated.

[name]Replaced by the name of the chunk.

[hash]Replaced by a hash of the compilation life cycle.

[chunkhash] replaced by the chunk hash .

2. Output

output.filename

Specifies the name of each output file for the hard drive. You cannot specify an absolute path here!

File Hash code:

Module.exports = {    //Packing Entranceentry: {main:'./src/js/main.js ', A:'./src/js/a.js '    },    //the packaged fileoutput: {//no __dirname will be an error .        //Path:__dirname + './dist/js ',        //filename: ' bundle.js '        //Error above 2 rows windowpath: __dirname,//Note: Use [name] to ensure that each file name is not duplicatedFileName: './dist/js/[name]-[hash].js '    }}

Execute command:

NPM Run Webpack

Results:

[hash] Each file hash is the same, the hash of the file is a packaged hash.

Module.exports = {    //Packing Entranceentry: {main:'./src/js/main.js ', A:'./src/js/a.js '    },    //the packaged fileoutput: {//no __dirname will be an error .        //Path:__dirname + './dist/js ',        //filename: ' bundle.js '        //Error above 2 rows windowpath: __dirname,//Note: Use [name] to ensure that each file name is not duplicatedFileName: './dist/js/[name]-[chunkhash].js '    }}

Using [Chunkhash] file hash is different, and packaging hash is not the same, where the hash is the MD5 value of the file .

Webpack entry and Output configuration properties