Heim > Artikel > Web-Frontend > 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 in wepback.config.js
//入口文件的配置项 entry:{ //里面的entery是可以随便写的 entry:'./src/entry.js'},
//出口文件的配置项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’);
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
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:{} }
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!