Cách tạo nhiều đường dẫn đầu ra trong cấu hình Webpack

Có ai biết cách tạo nhiều đường dẫn đầu ra trong tệp webpack.config.js không? Tôi đang sử dụng bootstrap-sass đi kèm với một vài tệp phông chữ khác nhau, v.v. Để webpack xử lý các trình tải tệp này, tôi đã bao gồm trình tải tệp hoạt động chính xác, tuy nhiên các tệp mà nó xuất ra đang được lưu vào đường dẫn đầu ra mà tôi đã chỉ định cho phần còn lại của tập tin của tôi:

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

Tôi muốn đạt được thứ gì đó mà tôi có thể xem các loại tiện ích mở rộng cho bất kỳ gói web nào được xuất ra và cho những thứ kết thúc bằng .woff .eot, v.v., đã chuyển chúng sang một đường dẫn đầu ra khác. Điều này có thể không?

Tôi đã làm một chút googling và đã gặp vấn đề * này trên github nơi một vài giải pháp được đưa ra, chỉnh sửa:

nhưng có vẻ như bạn cần biết điểm vào để có thể chỉ định đầu ra bằng phương thức băm, ví dụ:

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

tuy nhiên trong trường hợp của tôi, liên quan đến các tập tin phông chữ, quá trình nhập liệu là loại trừu tượng hóa và tất cả những gì tôi biết là đầu ra. trong trường hợp các tệp khác của tôi trải qua các biến đổi, có một điểm được biết là tôi yêu cầu chúng phải được xử lý bởi các trình tải của tôi. nếu có một cách để tìm ra bước này đang diễn ra ở đâu, thì tôi có thể sử dụng phương thức băm để tùy chỉnh đường dẫn đầu ra, nhưng tôi không biết những tệp này được yêu cầu ở đâu.

Tôi không chắc liệu chúng tôi có gặp vấn đề tương tự hay không vì webpack chỉ hỗ trợ một đầu ra cho mỗi cấu hình kể từ tháng 6 năm 2016. Tôi đoán bạn đã thấy vấn đề trên Github .

Nhưng tôi tách đường dẫn đầu ra bằng cách sử dụng trình biên dịch đa . (tức là tách đối tượng cấu hình của 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,       
];

Nếu bạn có cấu hình chung trong số chúng, bạn có thể sử dụng thư viện mở rộng hoặc Object.assigntrong ES6 hoặc{...} toán tử trải rộng trong ES7.

Webpack không hỗ trợ nhiều đường dẫn đầu ra.

Đặt đường dẫn đầu ra làm khóa nhập. Và sử dụngname mẫu đầu ra.

cấu hình 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'
}

tạo ra:

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

Nếu bạn có thể sống với nhiều đường dẫn đầu ra có cùng độ sâu và cấu trúc thư mục, có một cách để làm điều này trong webpack 2 (chưa thử nghiệm với webpack 1.x)

Về cơ bản, bạn không tuân theo các quy tắc tài liệu và bạn cung cấp một đường dẫn cho tên tệp.

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

Điều đó sẽ mất cấu trúc thư mục này

/-
  foo.js
  bar.js

Và biến nó thành

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

Tôi đã viết một plugin hy vọng có thể làm những gì bạn muốn, bạn có thể chỉ định các điểm nhập đã biết hoặc chưa biết (sử dụng toàn cầu ) và chỉ định đầu ra chính xác hoặc tự động tạo chúng bằng cách sử dụng tên và đường dẫn tệp nhập. https://www.npmjs.com/package/webpack-entry-plus

Bạn chắc chắn có thể trả về mảng cấu hình từ tệp webpack.config. Nhưng nó không phải là một giải pháp tối ưu nếu bạn chỉ muốn một bản sao của các tạo phẩm có trong thư mục tài liệu dự án của bạn, vì nó làm cho gói web xây dựng mã của bạn gấp đôi thời gian để xây dựng.

Trong trường hợp này, tôi khuyên bạn nên sử dụng plugin FileManagerWebpackPlugin thay thế:

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

Bạn chỉ có thể có một đường dẫn đầu ra.

từ các tài liệu https://github.com/webpack/docs/wiki/configuration#output

Các tùy chọn ảnh hưởng đến đầu ra của quá trình biên dịch. tùy chọn đầu ra cho Webpack biết cách ghi các tệp đã biên dịch vào đĩa. Lưu ý rằng trong khi có thể có nhiều điểm nhập cảnh, chỉ có một cấu hình đầu ra được chỉ định.

Nếu bạn sử dụng bất kỳ băm nào ([băm] hoặc [chunkhash]), hãy đảm bảo có một thứ tự các mô-đun nhất quán. Sử dụng OccurenceOrderPlugin hoặc recordsPath.

Tôi thực sự cố gắng chỉ vào index.js trong mô-đun trình tải tệp và thay đổi nơi phát ra nội dung. Đây có lẽ không phải là giải pháp tối ưu, nhưng cho đến khi có một cách khác, điều này vẫn ổn vì tôi biết chính xác những gì đang được xử lý bởi trình tải này, đó chỉ là phông chữ.

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