webpack에서 지정된 JS 파일을 별도로 패키징하는 방법-JS 튜토리얼-php.cn

webpack에서 지정된 JS 파일을 별도로 패키징하는 방법

亚连

풀어 주다： 2018-06-05 15:47:14

원래의

2881명이 탐색했습니다.

이제 webpack을 사용하여 지정된 JS 파일을 별도로 패키징하는 방법을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

Background

최근 요청을 받았습니다. 인쇄된 프런트엔드 패키지에서 액세스한 백엔드 IP가 확실하지 않기 때문에 수정을 용이하게 하기 위해 프로젝트의 IP 구성 파일을 별도로 꺼내야 합니다. 운영 및 유지 관리 배포 중 IP. 따라서 지정된 파일을 별도로 패키징하려면 webpack을 사용해야 합니다.

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: &#39;./dist/&#39;, //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: &#39;[name].[chunkhash].js&#39;, // 输出文件名
 chunkFilename: &#39;[name].[chunkhash].js&#39; // commonChunk 输出文件
 }
}

로그인 후 복사

Digression

{

여기서 주의할 점이 있습니다. 즉, 경로가 ./dist 상대 경로로 작성된다는 것입니다. /dist/와 같은 절대 경로를 작성하는 경우 한 가지 단점은 nginx가 프런트 엔드 패키지를 루트 디렉터리에 배치하지 않으면 index.html이 리소스에 액세스하지 못한다는 것입니다. 따라서 상대경로를 작성하는 것을 권장하지만, 상대경로를 사용할 경우 프로젝트 자체의 라우팅 접근이 해시를 사용하지 않고 HTML5 모드로 되어 있는 경우(위에 # 기호가 있는 경우) 잠재적인 문제가 발생할 수 있습니다. 라우팅), 프로젝트는 여전히 배포에 실패합니다. Angular와 React에는 이러한 문제가 있을 것입니다. 저는 Vue를 사용해 본 적이 없으므로 비슷할 것입니다. 이때 해결 방법은 index.html의 헤드에 기본 태그를 추가하는 것입니다. 즉,

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <base href="/" rel="external nofollow" >
</head>

로그인 후 복사

}

webpack 자체는 모듈성을 기반으로 하므로 대부분의 경우 항목 파일 하나만 가져오면 됩니다. 다 됐어. 이를 위해서는 앱 외에 항목 파일을 추가해야 합니다. 즉,

 entry: {
 app: APP_FILE // 入口文件
 ip: IP_FILE
 },

로그인 후 복사

이런 방식으로 webpack을 구성하면 dist 파일은 app.xxx.js 및 ip.xxx.js를 성공적으로 인쇄하지만 패키지된 프로젝트에서는 여전히 오류를 보고합니다. 해결 방법은 IP 항목 파일을 유지하는 것입니다. 변경되지 않고 commonChunk로 처리됩니다. 즉, ip.xxx.js가 먼저 로드되고 오류가 발생하지 않도록 플러그인에

new webpack.optimize.CommonsChunkPlugin({name: &#39;ip&#39;, minChunks: Infinity}),

로그인 후 복사

를 추가하세요.

단점: 이 패키징에는 분명한 단점이 있습니다. 즉, 패키징된 파일이 압축되어 있어 파일을 두 번 수정하는 것이 불편하다는 것입니다. (압축에 대한 솔루션을 찾을 수 없습니다.)

CopyWebpackPlugin

최종 솔루션은 ip.js 파일을 프로젝트의 모듈성에서 분리한 다음 index.html에서 별도로 참조하는 것입니다. (처음에 생각했던 해결 방법이었는데, 제가 원했던 해결 방법은 아니었고, 아쉽게도 제 지식이 부족해서 이전 문제를 해결하지 못했습니다.)

해결 과정:

먼저 webpack에 CopyWebpackPlugin을 도입하세요. 구성 코드:

new CopyWebpackPlugin([
  {from: &#39;./src/config/ip.js&#39;, to: &#39;ip.js&#39;},
 ])

로그인 후 복사

index.html에 스크립트 태그를 별도로 도입하세요. 임의의 접미사를 구성하는 데 주의하세요. 즉:

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

로그인 후 복사

ip.js 방지 캐싱으로 인해 문제가 발생하기 때문입니다.

위에서는 js를 별도로 지정하는 webpack 패키징 문제를 해결합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.