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

Czy ktoś wie jak utworzyć wiele ścieżek wyjściowych w webpacku.config.akta js? Używam bootstrap-sass, który jest dostarczany z kilkoma różnymi plikami czcionek itp. Aby webpack mógł je przetworzyć, dodałem file-loader, który działa poprawnie, jednak pliki, które wysyła, są zapisywane na ścieżce wyjściowej, którą podałem dla reszty moich plików: 

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

Chciałbym coś osiągnąć, gdzie może mogę spojrzeć na typy rozszerzeń dla tego, co wypowiada webpack i dla rzeczy kończy się .woff .eot, itp., mają być przekierowane na inną ścieżkę wyjściową. Czy to możliwe?

Poszperałem trochę w googlach i natknąłem się na ten *problem na GitHubie, gdzie jest kilka rozwiązań, edit:

Ale wygląda na to, że musisz znać punkt wejścia w stanie określić wyjście za pomocą metody hash eg: 

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 wejściowy jest trochę abstrakcyjny, a wszystko, co wiem, to wyjście. w przypadku innych moich plików przechodzących transformacje, jest znany moment, w którym wymagam, aby były obsługiwane przez moje Ładowarki. jeśli istnieje sposób, aby dowiedzieć się, gdzie ten krok się dzieje, mógłbym użyć metody hash, aby dostosować ścieżki wyjściowe, ale nie wiem, gdzie te pliki są wymagane.

Author: Jérémie Bertrand, 2016-03-10
Source

6 answers

Nie jestem pewien, czy mamy ten sam problem, ponieważ webpack obsługuje tylko jedno wyjście na konfigurację od czerwca 2016. Domyślam się, że widziałeś już numer na Githubie .

Ale oddzielam ścieżkę wyjściową za pomocą Multi-kompilatora. (tzn. oddzielenie obiektu konfiguracyjnego 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 extend lub Object.assign w ES6 lub {...} operator spreadu w ES7.

 120
Author: Yeo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-21 07:01:55

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

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

Webpack config: 

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

Wygenerowano: 

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
 125
Author: zhengkenghong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-24 11:08:35

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

Zasadniczo nie postępujesz zgodnie z regułami doc i podajesz ścieżkę dla 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 strukturę folderów 

/-
  foo.js
  bar.js

I przekształcić go w 

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
 9
Author: cmswalker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-28 22:02:49

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

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

Opcje wpływające na Wynik kompilacji. opcje wyjściowe mówią Webpackowi, jak zapisać skompilowane pliki na dysk. Zauważ, że chociaż może być wiele punktów wejścia, podana jest tylko jedna Konfiguracja wyjścia.

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

 2
Author: ex-zac-tly,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 23:01:53

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

 2
Author: sanjsanj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-30 17:53:50

Właściwie to weszłam do indeksu.js w module file-loader i zmiana miejsca emisji zawartości. Prawdopodobnie nie jest to optymalne rozwiązanie, ale dopóki nie będzie innego sposobu, jest to w porządku, ponieważ Wiem dokładnie, co jest obsługiwane przez ten loader, 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;
 0
Author: spb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-10 01:36:20