webpack을 사용하여 라이브러리를 묶는 방법은 무엇입니까?

프론트 엔드 라이브러리를 만들고 싶습니다. 그러므로 webpack을 사용하고 싶습니다. 나는 특히 CSS와 이미지 로더를 좋아한다. 그러나 webpack을 사용하는 경우 JS 파일이 아닌 파일 만 필요할 수 있습니다. 도서관을 건축 중이므로 내 도서관 사용자도 그렇게 할 수 없습니다.webpack을 사용하여 라이브러리를 묶는 방법은 무엇입니까?

모든 것을 UMD 모듈에 게시하여 게시 할 수 있습니까? 여러 진입 점을 사용해 보았지만 모듈을 요구할 수는 없습니다. 사전

출처

2016-12-28 Arwed Mett

내가 놓친 것일 수도 있습니다. 라이브러리 패키지를 npm에 게시하고 싶은데 사용자가 '가져올'것입니까? 그래서 "왜 webpack을 사용한다면 non-JS 파일 만 요구할 수 있습니까?" 예를 들어 주시겠습니까? 그리고 "여러 진입 점을 사용해 보았습니다."'webpack'이 필요 없다는 가능성을 고려 했습니까?'babel'만으로 충분할 수 있습니까? –

예 바벨 사용만을 고려했습니다. 그러나 필요한 경우 ("./ something.css") 필요로하는 프로젝트 ("my-library")에서 webpack을 사용하지 마십시오. 이걸 실행하면 작동하지 않습니다. –

그래서 webpack없이 사용할 라이브러리를 만들고 싶습니까? 승인. 단일 진입 점으로 시도 했습니까? –

에서

덕분에 당신은 웹팩 2.0 documentation site에 라이브러리를 만들기위한 좋은 가이드를 찾을 수 있습니다. 그래서이 예제에서는 webpack.config.js에 ver 2 구문을 사용합니다.

예제 라이브러리가있는 Github repo입니다.

그것은 단순히 umd 모듈로서 요구 될 수있는 하나 개의 번들로 JS src/ (js, png 및 css)에서 모든 파일을 만든다. 해야

output: { 
    path: './dist', 
    filename: 'libpack.js', 
    library: 'libpack', 
    libraryTarget:'umd' 
},

및 package.json을 : 당신은 하나 개의 파일에 모든 것을 포장하는 적절한 로더를 사용할 필요가

"main": "dist/libpack.js",

주를 우리가 webpack.config.js에서 추적 설정을 지정할 필요가에 대한

. 예 : base64-image-loader 대신 file-loader

출처

2017-01-05 12:07:37

라이브러리 이미지는 인라인 된 경우에만 사용할 수 있습니까? – davesaus

@davesaus 이미지를 분리 된 파일로 보관할 수 있습니다. 그것은 당신이 그것을 사용하려고하는 방법에 달려있다. –

만약 내가 함께 lib 함께 빌드 할 응용 프로그램을 원한다면 무엇이 필요합니까? –

webpack을 사용하여 라이브러리를 묶는 방법은 무엇입니까?

답변

관련 문제