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

Today, the editor will share with you the relevant knowledge points about how to configure file entry and exit in webpack. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1. Set up a js as the webpack.config.js file, which is the configuration file of Webpack

Webpack.config.js

Module.exports= {

Entry: {}, / / configuration items of the entry file

Output: {}, / / configuration items for export files

Module: {}, / / module: for example, interpreting CSS, how to convert pictures, and how to compress

Plugins: [], / / plug-ins for producing templates and various functions

DevServer: {} / / configure webpack development service function}

Entry: the address of the configuration entry file, which can be a single entry or multiple entries.

Output: the address of the configuration exit file. Multiple egress configuration is supported after the webpack2.X version.

Module: configuration module, mainly parsing CSS and image conversion compression and other functions.

Plugins: configure plug-ins, configure plug-ins with different functions according to your needs.

DevServer: configure the development service functionality, which we will explain in more detail later.

Entry option (portal configuration)

Entry options in wepback.config.js

/ / configuration items for entry files

Entry: {

/ / the entery in it can be written freely.

Entry:'./src/entry.js'}

Output option (egress configuration)

/ / configuration item output of the export file: {

/ / path name of the package

Path:path.resolve (_ _ dirname,'dist'), / / name of the packaged file

Filename:'bundle.js'}

Path.resolve (_ _ dirname,'dist') / / is the absolute path to the project.

Filename: is the name of the packaged file, which we call bundle.js here.

If you write it this way, you will get an error: you can't find path. So we're going to introduce path into the head of webpack.config.js.

Constpath=require ('path')

Now the code for webpack.config.js:

Constpath=require ('path')

Module.exports= {

/ / the configuration item entry of the entry file: {

Entry:'./src/entry.js'}

/ / configuration item output of the export file: {

/ / the path of the output, using Node syntax

Path:path.resolve (_ _ dirname,'dist')

/ / output file name filename:'bundle.js'}

/ / module: for example, interpreting CSS, how to convert images, and compressing module: {}

/ / plug-in for the production of templates and various functions plugins: []

/ / configure webpack development service feature devServer: {}}

Finally, enter webpack into the terminal to package.

Multi-entry and multi-exit configuration:

Constpath=require ('path') / / path is a constant that cannot be changed. Path needs to introduce varwebpack=require (' webpack')

Module.exports= {/ / bundle entry

Entry: {

The entry under entry:'./src/entry.js',// is a random name.

Entry2:'./src/entry2.js'// has two entrances and two exits.

}, / / bundle output

Output: {

Path:path.resolve (_ _ dirname,'dist'), / / absolute path

Filename:' [name] .js'/ / can be renamed when there are multiple entry files, the exit file is name, indicating that the packaged exit file has the same name as the entry file.

}

Module: {}

Plugins: []

DevServer: {}

}

Note: two changes have been made: entrance and exit changes

[name] means that according to the name of the entry file, it is packaged into the same name, and if there are several entry files, you can package several files.

These are all the contents of the article "how to configure file entry and exit in webpack". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.