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

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

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

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

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

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

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

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

85
config loader output path webpack

6 ответов

Я не уверен, что у нас такая же проблема, так как 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.

120

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
125

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

В основном вы не следуете правилам doc, и вы предоставляете путь для имени файла.

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
9

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

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

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

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

2

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

2

на самом деле я просто вошел в индекс.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;
0