So konfigurieren Sie den Dateieintrag und den Dateiexport im Webpack

In diesem Artikel geht es um die Konfiguration der Dateieingabe und des Dateiexports im Webpack. Ich hoffe, dass er für Freunde hilfreich ist.

1. Erstellen Sie eine js-Datei für webpack.config.js, die Konfigurationsdatei von Webpack
webpack.config.js

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

• Eintrag: Konfiguration Die Adresse der Eintragsdatei kann ein einzelner Eintrag oder mehrere Einträge sein.

• Ausgabe: Konfigurieren Sie die Adresse der Exportdatei. Nach der Webpack2.X-Version wird die Mehrfachexportkonfiguration unterstützt.

• Modul: Konfigurationsmodul, hauptsächlich für Funktionen wie CSS-Analyse sowie Bildkonvertierung und -komprimierung.

• Plugins: Konfigurieren Sie Plug-Ins, konfigurieren Sie Plug-Ins mit unterschiedlichen Funktionen entsprechend Ihren Anforderungen.

• devServer: Konfigurieren Sie die Entwicklungsdienstfunktion. Wir werden sie später ausführlich erläutern.

Eintragsoption (Eintragskonfiguration)

• Eintragsoption in wepback.config.js

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

Ausgabeoption (Konfiguration exportieren)

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

path.resolve(__dirname,'dist') //Dient zum Abrufen des absoluten Pfads des Projekts.

Dateiname: ist der Name der gepackten Datei, hier nennen wir sie bundle.js.
Wenn Sie es einfach so schreiben, erhalten Sie eine Fehlermeldung: Der Pfad kann nicht gefunden werden. Also müssen wir path

const path = require(‘path’);

in den Kopf von webpack.config.js einfügen. Jetzt den Code von 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:{}}

Geben Sie schließlich webpack ein Das Terminal. Verpackung

Konfiguration mit mehreren Eingängen und Ausgängen:

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:{}
}

Hinweis: Zwei Stellen geändert: Eingang und Ausgang. Die Bedeutung von

[Name] Es wird basierend auf dem Namen der Eintragsdatei in denselben Namen gepackt. Wenn mehrere Eintragsdateien vorhanden sind, können mehrere Dateien gepackt werden.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Webpack-Dateiseitenverpackung mit mehreren Einträgen

Wie Webpack Konfigurationsdateien optimiert

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie den Dateieintrag und den Dateiexport im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!