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

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.

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.

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

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

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

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/',
        }],
      },
    }),
],

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.

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;