Як створити декілька вихідних шляхів у конфігурації Webpack

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

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

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

Я трохи погуглився і натрапив на цю * проблему на 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/isissue/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

Якщо ви можете жити з кількома вихідними контурами, що мають однаковий рівень глибини та структури папок, є спосіб зробити це в 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

Я написав плагін, який, сподіваємось, може робити те, що ви хочете, ви можете вказати відомі або невідомі точки входу (використовуючи глобул ) і вказати точні виходи або динамічно генерувати їх, використовуючи шлях і ім'я вхідного файлу. 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, як записати складені файли на диск. Зауважте, що хоча може бути кілька точок входу, вказана лише одна конфігурація виводу.

Якщо ви використовуєте будь-які хешування ([хеш] або [чунхаш]), переконайтеся, що послідовне впорядкування модулів. Використовуйте модуль 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;