여러 웹팩을 빌드 작성 및 처리 옵션 dependecies

Question

나는 몇 가지 내가 만드는거야 라이브러리 빌드를 만들 웹팩을 사용하고

:

• 주방 싱크 빌드 - 이미 내장 된 모든 글로벌 deps를 포함, 페이지에 간단한 스크립트 포함으로 사용할 수 있습니다.
• 모듈 빌드 - 라이브러리 코드 만 포함되며 deps는 포함되지 않습니다. 구현자는 deps를 사용할 수 있는지 확인해야합니다.

각 웹 팩 구성에는 2 개가 있습니다. webpack 설정 파일의 가장 큰 차이점은 최소 빌드가 아래와 같이 externals 구성을 사용한다는 점입니다.이 구성은 빌드에서 deps를 생략합니다.

{ 
    lodash: { 
    commonjs: 'lodash', 
    commonjs2: 'lodash', 
    amd: 'lodash', 
    root: '_' 
    }, 
    rsvp: { 
    commonjs: 'rsvp', 
    commonjs2: 'rsvp', 
    amd: 'rsvp', 
    root: 'RSVP' 
    } 
} 

내 부엌 싱크대에 lodash를 모두 포함하려면이 기능이 훌륭합니다. 하지만 lodash가 다소 크기 때문에 lodash에서 ~ 3 개의 함수 만 사용하고 있습니다. 파일 크기를 최소화하기 위해 사용하는 함수 만 포함하는 사용자 정의 빌드로 이동하고 싶습니다. 나는 성공적으로 lodash의 사용자 빌드를 만들었고 예상대로 내 부엌 싱크대로 작동합니다.

내가 만나는 문제는 전역 인스턴스를 찾는 대신 사용자 정의 lodash 빌드를 포함하는 최소 빌드입니다.

로컬 매핑을 사용하면 lodash 가져 오기에 externals 매핑 문제가 발생한다고 생각합니다.

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js 

누구나 구축 lodash 사용자 정의에 대해 올바르게 외부 부품을 사용하는 방법 어떤 생각을 가지고 여기에 상황에 대한

// My original import that correctly removed lodash from minimal build 
var _ = require('lodash') 

// The new import I'm using to use my custom build 
var _ = require('./utilities/lodash.custom') 

내가 내 lodash을 만드는 데 사용하고 빌드 명령입니까?

Answer 1

나는 webpack에있는 다른 설정 옵션을 좀더 뒤적 거리고 난 후 이것을 알아 냈다. 나는 다른 사람이 같은 문제로 이것에 비틀 거리는 경우에 내 자신의 질문에 대답하고있다.

로다시를 가져올 때 에 대한 별칭을 만들도록 webpack 구성을 업데이트 할 수 있으므로 실제로 NPM에서 다운로드 한 것이 아니라 로컬 빌드를 가져옵니다. 내가 NPM에서 수입하고있어 것처럼 lodash에 대한

내하는 index.js 파일 가져 오기는 동일하게 유지 :

var _ = require('lodash'); 

내가 다음 내 코드 만 필요한 기능을 포함 lodash의 사용자 지정 빌드를 만들 수 있습니다. 그러면 ./utilites/lodash.custom.js 파일 아래에 정적 빌드가 생성됩니다.

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js 

그런 다음 내 webpack.conf.js 파일에 나는 내 로컬 lodash 빌드에 lodash 네임 스페이스를 가리키는 resolve 섹션을 추가했다.

부엌 싱크 build.webpack.config.js

{ 
    entry: './index.js', 
    output: { 
    path: path.resolve(__dirname, '../dist'), 
    library: 'CorsClient', 
    libraryTarget: 'umd', 
    filename: 'CorsClient.js' 
    }, 
    target: 'web', 
    plugins: [], 
    resolve: { 
    alias: { 
     'lodash': './utilities/lodash.custom' 
    } 
    } 
} 

이 구축 lodash 내 사용자 정의를 사용하고 종속성을 포함하는 출력 파일을 생성합니다.이 주방 싱크대는 모든 웹 사이트에서 독립형 스크립트로 사용할 수 있습니다.

모듈 build.webpack.config.js :

webpack.conf.js 파일에 다른 블록을 추가함으로써 그때 이미 전역에 출시 될 것으로 예상 할 수 있지만 lodash을 포함하지 않도록 웹팩 말할 수을

이 빌드는 lodash를 종속성으로 생략하고 구현자를 통해 수동으로 lodash를 가져옵니다. 이것은 이미 완전한 lodash가있는 다른 프로젝트 또는 적어도 동일한 lodash 기능을 포함하는 커스텀 lodash 빌드에 대한 종속성으로 가져 오기에 적합합니다.