วิธีสร้างหลายเส้นทางใน Webpack config

ไม่มีใครรู้วิธีการสร้างเส้นทางออกหลายเส้นทางในไฟล์ webpack.config.js ฉันใช้ bootstrap-sass ซึ่งมาพร้อมกับไฟล์ฟอนต์ต่าง ๆ เป็นต้นสำหรับ webpack ในการประมวลผลเหล่านี้ฉันได้รวมตัวโหลดไฟล์ซึ่งทำงานอย่างถูกต้องอย่างไรก็ตามไฟล์ที่เอาต์พุตถูกบันทึกไว้ในพา ธ เอาต์พุตที่ฉันระบุ ส่วนที่เหลือของไฟล์ของฉัน:

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

ฉันต้องการบรรลุสิ่งที่ฉันสามารถดูประเภทส่วนขยายสำหรับสิ่งที่ webpack กำลังแสดงผลและสำหรับสิ่งที่ลงท้ายด้วย. woff. eot, ฯลฯ ให้พวกเขาหันเหความสนใจไปที่เส้นทางออกที่แตกต่างกัน เป็นไปได้ไหม

ฉันทำ googling นิดหน่อยและพบปัญหานี้ใน 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/issues/1189

อย่างไรก็ตามในกรณีของฉันตราบใดที่ไฟล์ฟอนต์เกี่ยวข้องกระบวนการอินพุตก็เป็นสิ่งที่เป็นนามธรรมและทุกสิ่งที่ฉันรู้ก็คือผลลัพธ์ ในกรณีที่ไฟล์อื่น ๆ ของฉันอยู่ระหว่างการแปลงมีจุดที่รู้กันดีว่าฉันต้องการให้พวกเขาจัดการกับรถตักของฉัน หากมีวิธีการค้นหาว่าขั้นตอนนี้เกิดขึ้นที่ใดฉันสามารถใช้วิธีแฮชเพื่อปรับแต่งพา ธ เอาต์พุต แต่ฉันไม่ทราบว่าไฟล์เหล่านี้จำเป็นต้องใช้ที่ใด

ฉันไม่แน่ใจว่าเรามีปัญหาเดียวกันหรือไม่เนื่องจาก webpack รองรับเฉพาะหนึ่งเอาต์พุตต่อการกำหนดค่าในเดือนมิถุนายน 2559 ฉันเดาว่าคุณเห็นปัญหาใน 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เป็นเทมเพลตเอาต์พุต

กำหนดค่า 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

หากคุณสามารถใช้ชีวิตกับเส้นทางออกหลายเส้นทางที่มีระดับความลึกและโครงสร้างโฟลเดอร์เท่ากันมีวิธีการดังกล่าวใน webpack 2 (ยังไม่ได้ทดสอบกับ webpack 1.x)

โดยทั่วไปคุณจะไม่ปฏิบัติตามกฎเอกสารและให้เส้นทางสำหรับชื่อไฟล์

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

ฉันเขียนปลั๊กอินที่หวังว่าจะสามารถทำสิ่งที่คุณต้องการคุณสามารถระบุจุดเข้าใช้งานที่รู้จักหรือไม่รู้จัก (โดยใช้glob ) และระบุผลลัพธ์ที่แน่นอนหรือสร้างแบบไดนามิกโดยใช้เส้นทางและชื่อไฟล์ https://www.npmjs.com/package/webpack-entry-plus

คุณสามารถส่งคืนการกำหนดค่าได้อย่างแน่นอนจากไฟล์ webpack.config ของคุณ แต่ไม่ใช่ทางออกที่ดีที่สุดหากคุณต้องการให้สำเนาของสิ่งประดิษฐ์อยู่ในโฟลเดอร์เอกสารของโครงการของคุณเนื่องจากมันทำให้ webpack สร้างรหัสของคุณสองเท่าของเวลาโดยรวมในการสร้าง

ในกรณีนี้ฉันแนะนำให้ใช้ปลั๊กอิน 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 วิธีการเขียนไฟล์ที่รวบรวมไปยังดิสก์ โปรดทราบว่าในขณะที่สามารถมีได้หลายจุดเข้าใช้จะมีการระบุการกำหนดค่าเอาต์พุตเพียงหนึ่งรายการเท่านั้น

หากคุณใช้การแฮช ([hash] หรือ [chunkhash]) ตรวจสอบให้แน่ใจว่ามีการเรียงลำดับโมดูลที่สอดคล้องกัน ใช้ 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;