Как создать несколько выходных путей в конфигурации Webpack

Кто-нибудь знает, как создать несколько выходных путей в файле webpack.config.js? Я использую bootstrap-sass, который поставляется с несколькими различными файлами шрифтов и т. Д. Для веб-упаковки, чтобы обработать их, я включил загрузчик файлов, который работает правильно, однако файлы, которые он выводит, сохраняются в пути вывода, который я указал для остальные мои файлы:

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

Я хотел бы достичь чего-то, где я мог бы, возможно, взглянуть на типы расширений для того, что выводит веб-пакет, и для вещей, заканчивающихся на .woff .eot и т. Д., Чтобы они были перенаправлены на другой путь вывода. Это возможно?

Я немного погуглил и наткнулся на эту * проблему на github, где предлагается пара решений, отредактируйте:

но выглядит так, как будто вам нужно знать точку входа, чтобы определить выход с помощью хеш-метода, например:

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

однако в моем случае, что касается файлов шрифтов, процесс ввода отчасти отвлечен, и все, что я знаю, это вывод. в случае, когда мои другие файлы подвергаются преобразованиям, есть известный момент, когда я требую, чтобы они были обработаны моими загрузчиками. если бы был способ узнать, где происходит этот шаг, я мог бы затем использовать метод хэширования для настройки путей вывода, но я не знаю, где эти файлы требуются.

Я не уверен, есть ли у нас такая же проблема, поскольку webpack поддерживает только один вывод на конфигурацию по состоянию на июнь 2016 года. Я думаю, вы уже видели проблему на Github .

Но я разделяю путь вывода с помощью мультикомпилятора . (т.е. разделение объекта конфигурации 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,       
];

Если у вас есть общая конфигурация среди них, вы можете использовать библиотеку расширений или Object.assignв ES6 или {...}оператора распространения в ES7.

Webpack поддерживает несколько путей вывода.

Установите выходные пути в качестве ключа ввода. И используйте nameшаблон вывода.

Конфигурация веб-пакета:

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

Генерация:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Если вы можете жить с несколькими путями вывода, имеющими одинаковый уровень глубины и структуру папок, есть способ сделать это в веб-пакете 2 (еще предстоит протестировать с веб-пакетом 1.x)

По сути, вы не следуете правилам документа и указываете путь к имени файла.

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
    }
};

Это займет эту структуру папок

/-
  foo.js
  bar.js

И превратить это в

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

Я написал плагин, который, можно надеяться, будет делать то, что вы хотите, вы можете указать известные или неизвестные точки входа (используя glob ) и указать точные выходные данные или динамически сгенерировать их, используя путь и имя файла входа. https://www.npmjs.com/package/webpack-entry-plus

Вы определенно можете вернуть массив настроек из вашего файла webpack.config. Но это не оптимальное решение, если вы просто хотите, чтобы копия артефактов находилась в папке документации вашего проекта, так как это заставляет веб-пакет создавать код вдвое, удваивая общее время сборки.

В этом случае я бы рекомендовал использовать вместо этого плагин FileManagerWebpackPlugin:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

Вы можете иметь только один выходной путь.

из документов https://github.com/webpack/docs/wiki/configuration#output

Параметры, влияющие на вывод компиляции. параметры вывода сообщают Webpack, как записывать скомпилированные файлы на диск. Обратите внимание, что хотя может быть несколько точек входа, указывается только одна выходная конфигурация.

Если вы используете хеширование ([hash] или [chunkhash]), убедитесь, что у вас есть последовательный порядок модулей. Используйте OccurenceOrderPlugin или recordsPath.

На самом деле я просто зашел в index.js в модуле загрузчика файлов и изменил, куда было отправлено содержимое. Возможно, это не оптимальное решение, но пока нет другого пути, это нормально, так как я точно знаю, что обрабатывается этим загрузчиком, который является просто шрифтами.

//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;