Webpack: Erstellen Sie ein bundle mit jeder Datei im Verzeichnis

Ich versuche zu bündeln, wird jeder Winkel-Modul im webpack. Mein Ziel ist es, eine zu haben app.js das wird gebündelt durch webpack mit dieser Konfiguration:

entry: {
        app: "./app/app.js"
},
output: {
        path: "./build/ClientBin",
        filename: "bundle.js"
},

Werde ich dieses bundle-Skript in meine index.html so wird es Einstiegspunkt meiner app.
Auch ich habe viele Module in ./app/components Ordner. Ordner Struktur wie:

app
|--components
|  |
|  |--home
|  |  |
|  |  |--home.html
|  |  |--home.js
|--app.js
|--AppController.js

Ich gefragt home.html im home.js so, wenn ich load home.js alle seine benötigten Dateien laden.
Das problem ist, ich habe mehrere Komponenten, wie home - und ich möchte sagen webpack zu bündeln, wird jede Komponente separat und nennen Sie es mit dem enthaltenden Ordner wie home.

Wie kann ich die config webpack zu erstellen, diese Bündel und legte Sie in ./build/components?

InformationsquelleAutor alisabzevari | 2015-06-13

  1. 17

    Einen einfacheren Weg:

    Verwendung von Einheiten in Ihrem webpack.config.js:

    Hier ein Beispiel:

    var glob = require("glob");

module.exports = {
  entry: {
     js: glob.sync("./app/components/**/*.js"),  
  }
}
    Obwohl die akzeptierte Antwort verwendet out of the box tools, dies ist bei weitem die einfachste, und meine bevorzugte Antwort.
    stellen Sie sicher, zu installieren webpack-glob mit npm ersten. npm install webpack-glob --save-dev
    Kann mir jemand zeigen, was die gesamte webpack.config.js Datei Aussehen würde? Zum Beispiel, was soll der output Wert sein?

    InformationsquelleAutor David

  2. 3

    Können Sie erreichen, was Sie wollen, wie diese:

    entry: {
    home: './app/app.js',
    page: './page/app.js',
},
output: {
    path: './build/ClientBin',
    filename: '[name].js',
},

    Generiert home.js und page.js Sie sich Ihre Ausgabe-Pfad. Zwicken, Sie zu verallgemeinern, wie gebraucht. Sie werden wahrscheinlich wollen, diese zu extrahieren Eintrag der Pfade zu einer Variablen und so weiter.

    Beachten Sie, dass mit ein bisschen zwicken, sind Sie wahrscheinlich in der Lage, um die Ausgabe der bundles, wo genau Sie wollen. Ich erwarte von Ihnen, würde dann mit einem path wie ./app/components/[name] oder so.

    Das problem ist, dass ich nicht weiß, wie viele Einträge ich habe. Ich habe bearbeitet die Frage, um zu zeigen, mein workaround, aber ich bin auf der Suche nach einer out-of-the-box-Lösung.
    Deine Lösung sieht gut aus für mich. Wird eine Konfiguration angetriebene Werkzeuge Webpack egal wie generieren Sie die Konfiguration solange es richtig ist.
    Klingt logisch! So wie ich diese Frage-workflow? Ich meine, ich muss das bearbeitete Teil, um eine Antwort?
    Ja, Sie können das tun, und markieren Sie es als Antwort.

    InformationsquelleAutor Juho Vepsäläinen

  3. 2

    Landete ich definieren Einträge programmgesteuert. Ich schrieb dies in mein webpack.config.js:

    function getDirectories(srcpath) {
    return fs.readdirSync(srcpath).filter(function (file) {
        return fs.statSync(path.join(srcpath, file)).isDirectory();
    });
}

var entry = {
    app: "./app/app.ts",
    vendor: ["angular", "oclazyload", "angular-new-router", "lodash"]
};
var components = getDirectories("./app/components");
for (var i = 0; i < components.length; i++) {
    entry[components[i]] = "./app/components/" + components[i] + "/" + components[i] + ".ts";
}

    Dann verwendet entry variable in config.

    InformationsquelleAutor alisabzevari

  4. 1

    Jede exportierte Datei einzeln, können Sie den folgenden Codeausschnitt verwenden, um so zu tun:

    const glob = require('glob')
const path = require('path')

const entryFiles = glob.sync('./app/components/**/*.js').reduce((previousValue, currentValue, currentIndex, array) => {
  return typeof previousValue === 'string' ?
    {
      [path.basename(previousValue, path.extname(previousValue))]: previousValue,
      [path.basename(currentValue, path.extname(currentValue))]: currentValue
    }
    :
    { ...previousValue, [path.basename(currentValue, path.extname(currentValue))]: currentValue }
})

module.exports = {
  entry: entryFiles,
  resolve: {
    extensions: [ '.js' ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'build', 'ClientBin')
  }
}

    InformationsquelleAutor Acidic

Schreibe einen Kommentar