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

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

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

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

Я немного поработал с Google и наткнулся на эту проблему на 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

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

Ответ 1

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

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

Ответ 2

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

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

Конфигурация webpack:

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

Ответ 3

Если вы можете жить с несколькими путями вывода с одинаковым уровнем глубины и структурой папок, есть способ сделать это в webpack 2 (еще нужно проверить с помощью webpack 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

Ответ 4

У вас может быть только один путь вывода.

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

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

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

Ответ 5

На самом деле я просто зашел в 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;

Ответ 6

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