Cara membuat beberapa jalur output di konfigurasi Webpack

Adakah yang tahu cara membuat beberapa jalur output di file webpack.config.js? Saya menggunakan bootstrap-sass yang datang dengan beberapa file font yang berbeda, dll. Untuk webpack untuk memproses ini saya telah menyertakan file-loader yang berfungsi dengan benar, namun file yang outputnya disimpan ke jalur output yang saya tentukan untuk sisa file saya:

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

Saya ingin mencapai sesuatu di mana saya mungkin dapat melihat jenis ekstensi untuk apa pun keluaran webpack dan untuk hal-hal yang berakhir dengan .woff .eot, dll, minta mereka dialihkan ke jalur output yang berbeda. Apakah ini mungkin?

Saya melakukan sedikit googling dan menemukan masalah * ini di github di mana beberapa solusi ditawarkan, sunting:

tetapi sepertinya Anda perlu mengetahui titik masuk untuk dapat menentukan output menggunakan metode hash misalnya:

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

Namun dalam kasus saya, sejauh menyangkut file font, proses input agak abstrak dan semua yang saya tahu adalah output. dalam kasus file saya yang lain yang mengalami transformasi, ada titik yang diketahui di mana saya memerlukannya untuk kemudian ditangani oleh loader saya. jika ada cara untuk mencari tahu di mana langkah ini terjadi, saya kemudian bisa menggunakan metode hash untuk menyesuaikan jalur output, tetapi saya tidak tahu di mana file-file ini diperlukan.

Saya tidak yakin apakah kami memiliki masalah yang sama karena webpack hanya mendukung satu output per konfigurasi pada Juni 2016. Saya kira Anda sudah melihat masalah pada Github .

Tapi saya memisahkan jalur output dengan menggunakan multi-compiler . (Yaitu memisahkan objek konfigurasi 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,       
];

Jika Anda memiliki konfigurasi yang sama di antara mereka, Anda bisa menggunakan perluasan perpustakaan atau Object.assignES6 atau {...}operator penyebaran di ES7.

Webpack mendukung beberapa jalur keluaran.

Tetapkan jalur keluaran sebagai kunci entri. Dan gunakanname template keluaran sebagai.

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

dihasilkan:

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

Jika Anda dapat hidup dengan beberapa jalur keluaran yang memiliki tingkat kedalaman dan struktur folder yang sama ada cara untuk melakukan ini di webpack 2 (belum pernah menguji dengan webpack 1.x)

Pada dasarnya Anda tidak mengikuti aturan doc dan Anda memberikan path untuk nama file.

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

Itu akan mengambil struktur folder ini

/-
  foo.js
  bar.js

Dan mengubahnya menjadi

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

Saya menulis sebuah plugin yang diharapkan dapat melakukan apa yang Anda inginkan, Anda dapat menentukan titik masuk yang diketahui atau tidak dikenal (menggunakan glob ) dan menentukan keluaran yang tepat atau secara dinamis menghasilkan mereka menggunakan jalur dan nama file entri. https://www.npmjs.com/package/webpack-entry-plus

Anda pasti dapat mengembalikan berbagai konfigurasi dari file webpack.config Anda. Tapi itu bukan solusi optimal jika Anda hanya ingin salinan artefak berada di folder dokumentasi proyek Anda, karena itu membuat webpack membuat kode Anda dua kali lipat dua kali lipat keseluruhan waktu untuk membangun.

Dalam hal ini saya akan merekomendasikan untuk menggunakan plugin FileManagerWebpackPlugin sebagai gantinya:

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

Anda hanya dapat memiliki satu jalur output.

dari docs https://github.com/webpack/docs/wiki/configuration#output

Opsi yang memengaruhi output kompilasi. opsi keluaran memberi tahu Webpack cara menulis file yang dikompilasi ke disk. Perhatikan, bahwa meskipun ada beberapa titik masuk, hanya satu konfigurasi output yang ditentukan.

Jika Anda menggunakan hashing ([hash] atau [chunkhash]) apa pun, pastikan untuk memiliki urutan modul yang konsisten. Gunakan OccurenceOrderPlugin atau recordsPath.

Saya benar-benar akhirnya hanya masuk ke index.js dalam modul file-loader dan mengubah di mana isinya dipancarkan. Ini mungkin bukan solusi optimal, tetapi sampai ada cara lain, ini baik karena saya tahu persis apa yang sedang ditangani oleh loader ini, yang hanya font.

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