How to configure file entry and file export in webpack

The content of this article is about the methods of configuring file entry and file export in webpack. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

module.exports={  
    entry:{}, //入口文件的配置项
    output:{}, //出口文件的配置项
    module:{}, //模块：例如解读CSS,图片如何转换，压缩  
    plugins:[], //插件，用于生产模版和各项功能 
    devServer:{}//配置webpack开发服务功能}

• entry: configuration The address of the entry file can be a single entry or multiple entries.

• output: Configure the address of the export file. After webpack2.X version, multiple export configurations are supported.

• module: Configuration module, mainly for functions such as parsing CSS and image conversion and compression.

• plugins: Configure plug-ins, configure plug-ins with different functions according to your needs.

• devServer: Configure the development service function, we will explain it in detail later.

entry option (entry configuration)

• entry option in wepback.config.js

 //入口文件的配置项
 entry:{ 
     //里面的entery是可以随便写的
    entry:'./src/entry.js'},

output option (export configuration)

//出口文件的配置项output:{ 
    //打包的路径名称
    path:path.resolve(__dirname,'dist'), //打包的文件名称 
    filename:'bundle.js' },

path.resolve(__dirname,'dist') //Is to obtain the absolute path of the project.

filename: is the name of the packaged file, here we name it bundle.js.
If you just write like this, you will get an error: the path cannot be found. So we need to introduce path in the head of webpack.config.js

const path = require(‘path’);

Now the code of webpack.config.js:

const path = require('path');
module.exports={ 
//入口文件的配置项 entry:{ 
    entry:'./src/entry.js' }, 
//出口文件的配置项 output:{ 
//输出的路径，用了Node语法
 path:path.resolve(__dirname,'dist'), 
//输出的文件名称 filename:'bundle.js' }, 
//模块：例如解读CSS,图片如何转换，压缩 module:{}, 
//插件，用于生产模版和各项功能plugins:[], 
//配置webpack开发服务功能devServer:{}}

Finally enter webpack in the terminal Packaging

Multi-entry and multi-exit configuration:

const path = require('path')    //path是一个常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是随便起的名字
    entry2:'./src/entry2.js'    //有两个入口也要有两个出口
  },  // bundle输出
  output: {
    path: path.resolve(__dirname, 'dist'),    //绝对路径
    filename: '[name].js' //可重命名        当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{}
}

Note: Two places have been modified: entrance and exit. Modify the meaning of

[name] It is packaged into the same name based on the name of the entry file. If there are several entry files, several files can be packaged.

Related recommendations:

Webpack multi-entry file page packaging details

How Webpack optimizes configuration files

The above is the detailed content of How to configure file entry and file export in webpack. For more information, please follow other related articles on the PHP Chinese website!