Webpack 구성에서 여러 출력 경로를 만드는 방법

누구나 webpack.config.js 파일에 여러 개의 출력 경로를 만드는 방법을 알고 있습니까? 나는 몇 가지 다른 글꼴 파일과 함께 제공되는 bootstrap-sass를 사용하고 있습니다. 나머지 파일들 :

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

웹 팩이 출력하는 것과 확장명이 .woff .eot 등인 경우 확장 유형을 볼 수있는 곳에서 다른 출력 경로로 전환했는지 확인하고 싶습니다. 이게 가능해?

나는 약간의 인터넷 검색을하고 몇 가지 솔루션이 제공되는 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이 2016 년 6 월 현재 구성 당 하나의 출력 만 지원하기 때문에 동일한 문제가 있는지 확실하지 않습니다. 이미 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.assignES6 또는 {...}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로 아직 테스트하지 않은 경우)

기본적으로 문서 규칙을 따르지 않으며 파일 이름의 경로를 제공합니다.

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 파일에서 구성 배열을 반환 할 수 있습니다. 그러나 아티팩트 사본을 프로젝트 문서의 폴더에 저장하려는 경우 웹팩으로 인해 코드 작성 시간이 전체 빌드 시간의 두 배가 두 배가되기 때문에 최적의 솔루션이 아닙니다.

이 경우 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;