Webpack yapılandırmasında birden çok çıkış yolu oluşturma

Herkes bir webpack.config.js dosyasında birden çok çıktı yollarının nasıl oluşturulacağını biliyor mu? Ben birkaç farklı yazı tipi dosyaları, vb ile gelen bootstrap-sass kullanıyorum. Webpack bu işlemek için, ancak düzgün çalıştığı dosya yükleyici dahil ettik, ancak çıktıları dosyaları için belirtilen çıkış yoluna kaydediliyor dosyalarımın geri kalanı:

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

Belki webpack çıktı ne olursa olsun ve .woff .eot, vb ile biten şeyler için uzantı türlerine bakabilirsiniz bir şey elde etmek istiyorum, onları farklı bir çıkış yoluna yönlendirdi var. Mümkün mü?

Biraz googling yaptım ve birkaç çözümün sunulduğu github'da bu * sorunla karşılaştım, düzenleyin:

ancak hash yöntemini kullanarak bir çıktı belirleyebilmek için giriş noktasını bilmeniz gerekir gibi görünür:

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

Ancak benim durumumda, yazı tipi dosyaları söz konusu olduğunda, giriş süreci tür soyutlanmış ve tüm bildiğim çıktı. dönüşümler geçirdiğim diğer dosyalarımda, yükleyiciler tarafından ele alınmasını gerektiren bilinen bir nokta var. bu adım nerede olduğunu bulmak için bir yol varsa, sonra çıkış yollarını özelleştirmek için karma yöntemini kullanabilirsiniz, ancak bu dosyaların nerede gerekli olduğunu bilmiyorum.

Webpack'in Haziran 2016'dan itibaren yapılandırma başına yalnızca bir çıkışı desteklediğinden, aynı sorunla karşılaştığımızdan emin değilim. Sanırım sorunu zaten Github'da gördünüz .

Ama çıkış yolunu kullanarak çoklu derleyiciyi . (yani yapılandırma nesnesinin ayrılması 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,       
];

Aralarında ortak yapılandırmanız varsa, genişletme kitaplığını veya Object.assignES6'da veya ES7'de {...}yayma işlecini kullanabilirsiniz.

Webpack çoklu çıkış yollarını destekliyor.

Çıkış yollarını giriş tuşu olarak ayarlayın. Ve nameçıkış şablonunu kullanın .

webpack yapılandırması:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

oluşturulan:

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

Aynı derinlik ve klasör yapısına sahip birden fazla çıkış yolu ile yaşayabiliyorsanız, bunu webpack 2'de yapmanın bir yolu vardır (henüz webpack 1.x ile test etmediniz)

Temel olarak belge kurallarına uymazsınız ve dosya adı için bir yol sağlarsınız.

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

Bu klasör yapısını alacak

/-
  foo.js
  bar.js

Ve onu

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

Umarım istediğini yapabilen bir eklenti yazdım, bilinen veya bilinmeyen giriş noktalarını ( glob kullanarak ) belirleyebilir ve kesin çıktıları belirleyebilir veya giriş dosyası yolunu ve adını kullanarak dinamik olarak oluşturabilirsiniz. https://www.npmjs.com/package/webpack-entry-plus

Kesinlikle webpack.config dosyanızdan bir dizi yapılandırma döndürebilirsiniz. Ancak, eserlerin bir kopyasının projenizin belgelerinin klasöründe olmasını istiyorsanız en uygun çözüm değildir, çünkü webpack'in kodunuzu toplam inşa süresini iki katına çıkarır.

Bu durumda bunun yerine FileManagerWebpackPlugin eklentisini kullanmanızı tavsiye ederim:

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

Yalnızca bir çıkış yolunuz olabilir.

https://github.com/webpack/docs/wiki/configuration#output dokümanlarından

Derlemenin çıktısını etkileyen seçenekler. çıktı seçenekleri Webpack'e derlenen dosyaların diske nasıl yazılacağını söyler. Birden fazla giriş noktası olsa da, yalnızca bir çıkış yapılandırmasının belirtildiğini unutmayın.

Herhangi bir karma ([hash] veya [chunkhash]) kullanıyorsanız, modüllerin tutarlı bir şekilde sıralandığından emin olun. OccurenceOrderPlugin veya recordingPath kullanın.

Aslında sadece dosya yükleyici modülünde index.js'ye girerek içeriğin yayıldığı yeri değiştirdim. Bu muhtemelen en uygun çözüm değildir, ancak başka bir yol olana kadar bu iyidir, çünkü bu yükleyici tarafından neyin ele alındığını tam olarak biliyorum, sadece yazı tipleri.

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