How to configure file entry and file exit in Webpack

This article brings the content is about the Webpack in the configuration file entry and file export method, there is a certain reference value, the need for friends can refer to, I hope to help you.

1, set up a JS for the Webpack.config.js file, the file is webpack configuration file
Webpack.config.js

module.exports={      entry:{},//Entry file Configuration entry output:{},//    Export File Configuration item    module:{},//module: For example, interpreting CSS, how images are converted, compressed      Plugins:[],//plug-in for production templates and various functions     devserver:{}//configuration Webpack Development Service Function}

• Entry: Configure the address of the portal file, either as a single entry or as a multi-entry.

• Output: Configure the address of the export file at Webpack2. After the X version, the multi-egress configuration is supported.

• Module: Configuration modules, mainly parsing CSS and image conversion compression and other functions.

• Plugins: Configure plug-ins to configure different features according to your needs.

• Devserver: Configure the Development service function, we will explain in detail later.

Entry option (Ingress configuration)

• Entry options in Wepback.config.js

Configuration entry for the portal file entry:{      //The entery inside is a entry that can be written casually    : './src/entry.js '},

Output option (Egress configuration)

Configuration items for export files output:{     //packaged path name    path:path.resolve (__dirname, ' dist '),//packaged file name     filename: ' Bundle.js '},

Path.resolve (__dirname, ' dist ')//is the absolute path to get the project.

FileName: Is the name of the packaged file, and here we are named Bundle.js.
The only way to write this is to get an error: You can't find the path. So we're going to introduce path to Webpack.config.js's head.

Const PATH = require (' path ');

Now the Webpack.config.js code:

Const PATH = require (' path '); Configuration entry for module.exports={//ingress file entry:{     entry: './src/entry.js '},//Export file configuration item output:{// The output path, using the node syntax path:path.resolve (__dirname, ' dist '),//output file name filename: ' Bundle.js '},//module: For example, interpret CSS, how the image is converted, compression module: {},//plug-in for production templates and features plugins:[],//Configure Webpack Development service features devserver:{}}

Finally, enter Webpack in the terminal to package

Multi-inlet, multi-egress configuration:

Const PATH = require (' path ')    //path is a constant cannot be changed  , path needs to introduce var Webpack = require (' webpack ') module.exports = {  / /Bundle Entry  entry:{    entry: './src/entry.js ',    //entry below is a casual name    entry2: './src/entry2.js '    // There are also two exits for two entrances  },  //bundle outputs output  : {    path:path.resolve (__dirname, ' dist '),    //absolute path    FileName: ' [name].js '//Can be renamed        when there are multiple entry files, export file with name, description of the package export file and the same entry file name  },  module:{},  plugins:[],  devserver:{}}

Note: Modified two places: entrance and exit modification

[name] means that, depending on the name of the portal file, it is packaged into the same name, with several portal files, and several files can be packaged.