Jak utworzyć wiele ścieżek wyjściowych w konfiguracji WebPacka

165

Czy ktoś wie, jak utworzyć wiele ścieżek wyjściowych w pliku webpack.config.js? Używam bootstrap-sass, który jest dostarczany z kilkoma różnymi plikami czcionek itp. Aby webpack mógł je przetworzyć, dołączyłem program ładujący pliki, który działa poprawnie, jednak pliki, które wyprowadza, są zapisywane w ścieżce wyjściowej określonej dla reszta moich plików:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

Chciałbym osiągnąć coś, w którym być może mógłbym spojrzeć na typy rozszerzeń dowolnego wysyłanego pakietu internetowego, a rzeczy kończące się na .woff .eot itp., Przekierować je do innej ścieżki wyjściowej. czy to możliwe?

Zrobiłem trochę googlowania i natknąłem się na ten * problem na githubie, gdzie jest kilka rozwiązań, edytuj:

ale wygląda na to, że potrzebujesz znać punkt wejścia, aby móc określić dane wyjściowe za pomocą metody skrótu, np .:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

jednak w moim przypadku, jeśli chodzi o pliki czcionek, proces wprowadzania jest trochę abstrakcyjny i wszystko, co wiem, to wynik. w przypadku innych moich plików, które przechodzą transformacje, istnieje znany punkt, w którym wymagam, aby były one następnie obsługiwane przez moje programy ładujące. gdyby istniał sposób, aby dowiedzieć się, gdzie miał miejsce ten krok, mógłbym użyć metody skrótu, aby dostosować ścieżki wyjściowe, ale nie wiem, gdzie te pliki są wymagane.

spb
źródło

Odpowiedzi:

221

Nie jestem pewien, czy mamy ten sam problem, ponieważ webpack obsługuje tylko jedno wyjście na konfigurację od czerwca 2016 r. Wydaje mi się, że problem był już widoczny na Githubie .

Ale oddzielam ścieżkę wyjściową za pomocą multi-kompilatora . (tj. oddzielenie obiektu konfiguracji od webpack.config.js).

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

Jeśli masz wśród nich wspólną konfigurację, możesz użyć biblioteki rozszerzonejObject.assign lub {...}operatora ES6 lub operatora spreadu w ES7.

Yeo
źródło
Nie uruchomiłem fragmentu kodu, może wystąpić błąd lub literówka
Yeo
Uruchomiłem twój fragment, działa jak czarujący ... Zaskoczony, nikt tego nie zauważył, eh frontendowcy, bez cierpliwości, zawsze w pośpiechu ;-). Eksportuję konfiguracje w ten sam sposób, ale moja deklaracja jest inna / standardowa: var config = {entry: SOURCE_DIR + '/index.jsx', ....} Nie korzystałem też z żadnego multi kompilatora: - \
Aubergine
Czy możesz po prostu zrobić webpack && cp itp. W npm?
SuperUberDuper,
1
Jest to dla mnie bardzo przydatne, aby wdrożyć pakiet npm zarówno w oryginalnym folderze (są tam testy automatyczne), jak i w folderze aplikacji, która implementuje pakiet. W ten sposób mogę pominąć etap pobierania npm i przetestować na żywo mój zaktualizowany kod pakietu, aż nowa wersja będzie stabilna i gotowa do opublikowania na npm.
Adrian Moisa,
<pre> <code> var config = {// TODO: Dodaj wspólny moduł konfiguracyjny: {},}; </code> </pre> module{}Obiekt jest nieprawidłowy. To nie jest wymagane. Zostanie on przedłużony / połączone na tym samym poziomie, co słów kluczowych name, entry, output(z przykładu). <pre> <code> {module: {mode: "development", devtool: "source-map"}}, name: "a", entry: "./a/app", output: {path: "/ a ", nazwa_pliku:" bundle.js "}} </code> </pre>
Rob Waa
249

Webpack obsługuje wiele ścieżek wyjściowych.

Ustaw ścieżki wyjściowe jako klucz wejścia. I użyj namejako szablonu wyjściowego.

konfiguracja webpacka:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

wygenerowane:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
zhengkenghong
źródło
4
W moim przypadku chcę, aby jedno wyjście nie zawierało chunkhash, czy jest na to proste rozwiązanie? Dzięki.
raRaRa
1
@zhengkenghong Uważam, że wygenerowana ścieżka wyjściowa będzie distw nim potrzebować . Więc zamiast module/a/index.jsbyć ścieżką wyjściową, powinna być. module/a/dist/index.jsW przeciwnym razie nadpisujesz swoje pliki wejściowe.
dance2die,
1
distFolder @Sung jest już skonfigurowany w ścieżce wyjściowej. Tak więc wygenerowany plik byłby faktycznie taki dist/module/a/index.js, o którym nie wspomniałem.
zhengkenghong
4
Myślę, że to powinna być akceptowana odpowiedź, ponieważ jest to odpowiedź z dokumentów pakietu Webpack 4. -> webpack.js.org/concepts/output/#multiple-entry-points
Will
1
@raRaRa Spóźniono się na imprezę, ale możesz to zrobić, używając funkcji output.filenamezgodnie z dokumentacją tutaj: webpack.js.org/configuration/output/#outputfilename
Thomas
22

Jeśli możesz żyć z wieloma ścieżkami wyjściowymi o tym samym poziomie głębi i strukturze folderów, istnieje sposób, aby to zrobić w pakiecie internetowym 2 (musisz jeszcze przetestować z pakietem webpack 1.x)

Zasadniczo nie przestrzegasz zasad dokumentu i podajesz ścieżkę do nazwy pliku.

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

To zajmie taką strukturę folderów

/-
  foo.js
  bar.js

I zamień to w

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
cmswalker
źródło
@ccnixon jest to udokumentowane tutaj webpack.js.org/configuration/output/#outputfilename. szukaj „nadal dozwolone”.
John Henckel
3

Napisałem wtyczkę, która, mam nadzieję, może zrobić to, co chcesz, możesz określić znane lub nieznane punkty wejścia (za pomocą globu ) i określić dokładne wyniki lub dynamicznie wygenerować je za pomocą ścieżki i nazwy pliku wejściowego. https://www.npmjs.com/package/webpack-entry-plus

sanjsanj
źródło
3

Zdecydowanie możesz zwrócić tablicę konfiguracji z pliku webpack.config. Ale nie jest to optymalne rozwiązanie, jeśli chcesz tylko, aby kopia artefaktów znalazła się w folderze dokumentacji twojego projektu, ponieważ powoduje to, że webpack tworzy kod dwukrotnie, podwajając całkowity czas kompilacji.

W takim przypadku polecam zamiast tego użyć wtyczki FileManagerWebpackPlugin:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],
Alexander
źródło
1

Możesz mieć tylko jedną ścieżkę wyjściową.

z dokumentacji https://github.com/webpack/docs/wiki/configuration#output

Opcje wpływające na wynik kompilacji. opcje wyjścia informują Webpack, jak zapisać skompilowane pliki na dysku. Należy zauważyć, że chociaż może istnieć wiele punktów wejścia, określona jest tylko jedna konfiguracja wyjścia.

Jeśli używasz haszowania ([hash] lub [chunkhash]), upewnij się, że masz spójną kolejność modułów. Użyj metody OccurenceOrderPlugin lub recordsPath.

ex-zac-tly
źródło
dzięki. zostawię Q na wypadek, gdyby ktoś mógł wymyślić obejście.
spb
Jaki jest twój przypadek użycia wymagający 2 ścieżek wyjściowych? Wygląda na to, że chcesz 2 aplikacje lub 1 aplikację i 1 moduł.
ex-zac-tly
Pomyślałem, że potrzebuję takiego, który byłby dedykowany do danych wyjściowych generowanych przez program ładujący pliki, który trafiał do katalogu głównego projektu, podczas gdy chciałem, aby był w swoim własnym folderze. Skończyło się na przekierowaniu ścieżki wyjściowej w samym module ładującym, zgodnie z moją odpowiedzią poniżej.
spb
1
To nie jest do końca prawdą. Z technicznego punktu widzenia możesz określić tylko jedną ścieżkę wyjściową, ale będzie ona dotyczyła każdego klucza w obiekcie wejściowym, umożliwiając uzyskanie wielu wyjść - webpack.js.org/concepts/entry-points
sanjsanj
0

Skończyło się na tym, że przeszedłem do index.js w module ładującym pliki i zmieniłem miejsce, w którym zawartość była emitowana. Prawdopodobnie nie jest to optymalne rozwiązanie, ale dopóki nie ma innego sposobu, jest to w porządku, ponieważ dokładnie wiem, co jest obsługiwane przez ten program ładujący, czyli tylko czcionki.

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;
spb
źródło
1
Nie wiem, czy nadal jest to problem, ale spójrz na npmjs.com/package/webpack-entry-plus
sanjsanj