Wie kann ich mit Webpack die Eingabe und Ausgabe mehrerer Dateien im Projekt festlegen?

Wie kann ich mit einem Webpack die Eingabe / Ausgabe mehrerer Dateien im Projekt festlegen?

Ich folge http://webpack.github.io/docs/tutorials/getting-started/ Erfolgskompilierung, wenn nur eine Datei in einem Eintrag / einer Ausgabe ...

Verzeichnis

app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...

wie so ausgeben?

././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js

webpack.config.js

module.exports = {
  entry: {
    'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
  },
  output: {
    path: 
  }

    // if only one file
    // entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
    // output: {
    //     // path: __dirname,
    //     path: "./assets/javascripts/Administrator/Article/Create/",
    //     filename: "bundle.js"
    // }
};

Verwenden Sie für viele Einstiegspunkte Arrays als Wert für die entryEigenschaft:

entry: {
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']
}

appund vendorssind Arrays, sodass Sie dort so viele Dateipfade platzieren können, wie Sie benötigen.

Für Ausgabefall:

output: {
  path: staticPath,
  filename: '[name].js'
}

Das [name]wird von entryEigenschaften übernommen. Wenn wir also appund vendorsals Eigenschaften haben, haben wir 2 Ausgabedateien - app.jsund vendors.js.

Dokumentationslink

Wenn Sie in mehrere Verzeichnisse ausgeben möchten, können Sie den Pfad als Eintragsnamen verwenden. Zum Beispiel, wenn Sie diese Verzeichnisstruktur möchten:

apps
├── dir1
│   └── js
│       ├── main.js [entry 1]
│       └── bundle.js [output 1]
└── dir2
    ├── index.js [entry 2]
    └── foo.js [output 2]

Versuchen Sie dies dann in Ihrem module.exports:

{
  entry: {
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  },
  output: {
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  },
  ...
}

Was es für mich wirklich gelöst hat, war Folgendes:

entry:  {
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"
}

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},

Sie können mehrere Einträge erkennen und separate Ausgabedateien mithilfe von Glob-Synchronisierungsmustern generieren .

Setzen Sie dies in Ihre webpack.config.js(ohne die ...)

const glob = require("glob");
...
module.exports = (env, options) => ({
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  }, {}),
  output: {
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  },
  ...
});

Dieses "sollte" gibt Ihnen die gewünschte Ausgabe.

Was passiert , wenn Sie die Ausgabedateien bekommen foo.cssund bar.jszur gleichen Zeit? Die obigen Antworten scheinen nicht in der Lage zu sein, damit umzugehen.

Der vernünftige Weg ist die Verwendung eines Multi-Compilers . Eine Eingabedatei, ein Konfigurationsobjekt, eine Ausgabedatei. Davon Antwort .

Dieses Webpack-Plugin Web-Webpack-Plugin kann es auf beispielhafte Weise beheben.

AutoWebPlugin kann alle Seiteneinträge in einem Verzeichnis finden und dann automatisch konfigurieren WebPlugin für jede Seite eine HTML-Datei ausgeben. Sie können sie wie folgt verwenden:

Webpack-Konfiguration

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

src Verzeichnis

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

Ausgabe Verzeichnis

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPluginFinden Sie alle Seitenverzeichnisse home login signupin ./src/, für diese drei Seiten home login signupwird verwendetindex.js als Hauptdatei verwendet und geben drei HTML-Dateien home.html login.html signup.html` aus

siehe doc: HTML-Eintrag automatisch erkennen

Diese Frage ist 2 Jahre alt, daher denke ich, dass der Autor mit ziemlicher Sicherheit von dieser Ausgabe abgewichen ist, aber für jeden, der in jüngerer Zeit hier gelandet ist, hatte ich ein wirklich ähnliches Bedürfnis und konnte mein eigenes Plugin schreiben, um dynamische Ausgabepfade / Namen von zu ermöglichen bekannte und / oder unbekannte Einstiegspunkte.

Mein Problem und Denkprozess für die Lösung finden Sie hier .

Und das Node-Paket selbst hier .

Für meinen Anwendungsfall musste ich je nach Umgebung unterschiedliche Vorlagen verwenden. Um dies zu erreichen, habe ich die Variable NODE_ENV übergeben

module.exports = (env, argv) => {
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') {
    INDEX_HTML = 'index-stg.html';
  }

Dann:

if (NODE_ENV === 'staging') {
   INDEX_HTML = 'index-stg.html';
}

In der Ausgabe:

output: {
      path: process.cwd() + '/build',
      filename: `[name].js`,
      chunkFilename: `[${HASH_MODE}].[name].js`
    },

Plugins:

new HtmlWebpackPlugin({
        inject: true,
        template: `app/${INDEX_HTML}`,
      }),