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

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



    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



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

680   6  

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  
2018-09-21 10:01:55

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

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

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

сгенерирована:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
125  
2017-07-24 14:08:35

Если вы можете жить с несколькими выходными путями, имеющими одинаковый уровень глубины и структуру папок, есть способ сделать это в 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  
2017-04-29 01:02:49

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

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

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

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

2  
2016-03-10 01:01:53

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

2  
2017-11-30 19:53:50

Я на самом деле завелся просто идя в индекс.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  
2016-03-10 03:36:20

Comments

    Ничего не найдено.
Click here to cancel reply.