웹 팩 단독 패키지 지정 JS 파일

배경
최근 에 제 시 된 전단 패키지 가 방문 한 백 엔 드 IP 가 확실 하지 않 기 때문에 프로젝트 의 IP 설정 파일 을 따로 꺼 내 서 운영 배치 에 편리 할 때 IP 를 수정 해 야 합 니 다.따라서 지정 한 파일 을 웹 팩 으로 따로 포장 해 야 합 니 다.
CommonsChunkPlugin

module.exports = {
    entry: {
        app: APP_FILE //     
    },
    output: {
        publicPath: './dist/', //    ，index.html       
        path: BUILD_PATH, //     
        filename: '[name].[chunkhash].js', //      
        chunkFilename: '[name].[chunkhash].js' // commonChunk     
    }
}

별말
{
먼저 PublicPath 를 말씀 드 리 겠 습 니 다. 여기 에는 경로 가. / dist 상대 경로 로 쓰 여 있 습 니 다. / dist / 라 는 절대적 인 경 로 를 쓰 면 nginx 가 전단 의 가방 을 루트 디 렉 터 리 에 두 지 않 은 상태 에서 index. html 는 자원 에 접근 하 는 데 실패 하 는 단점 이 있 습 니 다. 따라서 상대 경로 로 쓰 는 것 을 추천 합 니 다. 그러나 상대 경 로 를 사용 할 때 잠재 적 인 문제 가 있 습 니 다.즉, 프로젝트 자체 의 경로 접근 이 hash 가 아 닌 HTML 5 모드 라면 (경로 에 \ # 번호 가 있 음) 프로젝트 역시 배치 에 실패 합 니 다. angular, react 는 이러한 문제 가 있 습 니 다. vue 는 사용 하지 않 았 습 니 다. 유사 해 야 합 니 다. 이때 해결 방법 은 index. html 의 head 에 base 탭 을 추가 하 는 것 입 니 다. 즉,:

}
웹 팩 자 체 는 모듈 화 를 기반 으로 하기 때문에 대부분의 경우 입구 파일 하나만 있 으 면 해결 할 수 있 습 니 다.이번 수요 에 따라 app, 이 입구 외 에 입구 파일 을 추가 해 야 합 니 다.즉:

 entry: {
        app: APP_FILE //     
        ip: IP_FILE
    },

이렇게 웹 팩 설정 을 한 후에 dist 파일 은 app. xxx. js 와 ip. xxx. js 를 성공 적 으로 보 여 줍 니 다. 그러나 포 장 된 항목 은 잘못 보 고 됩 니 다. 해결 방법 은 IP 의 입구 파일 은 변 하지 않 지만 comonChunk 로 처리 하 는 것 입 니 다.plugins 에 가입:

new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),

이렇게 하면 ip. xxx. js 를 우선 불 러 와 오 류 를 피 할 수 있 습 니 다.단점: 이렇게 포장 하 는 것 은 포장 한 파일 이 압축 되 어 있어 서 파일 을 2 차 수정 하기 가 불편 하 다 는 뚜렷 한 단점 이 있 습 니 다.(압축 을 해결 할 방법 을 찾 지 못 했다)
CopyWebpackPlugin
최종 해결 방법 은 ip. js 라 는 파일 을 프로젝트 의 모듈 화 에서 벗 어 나 index. html 에서 단독으로 참조 하 는 것 입 니 다.(이것 은 처음부터 생각 한 해결 방법 이지 만 자신 이 원 하 는 해결 방안 은 아니 지만 어 쩔 수 없 이 인지 에 한계 가 있어 이전의 문 제 를 해결 하지 못 했다).
해결 프로 세 스: 우선 웹 팩 에 CopyWebpackPlugin 을 도입 하고 코드 를 설정 합 니 다.

new CopyWebpackPlugin([
            {from: './src/config/ip.js', to: 'ip.js'},
        ])

index. html 에 script 라벨 을 따로 도입 합 니 다. 무 작위 접 두 사 를 설정 하 십시오. 즉,:

    document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");

ip. js 가 캐 시 로 인 한 문 제 를 방지 합 니 다.
이상, 웹 팩 단독 포장 지정 js 문 제 를 해결 하 였 습 니 다.
ps: 더 좋 은 방법 이 있 었 으 면 좋 겠 어 요.