집 > 기사 > 웹 프론트엔드 > 지정된 JS 파일을 webpack으로 패키징하기 위해 수행해야 할 작업

지정된 JS 파일을 webpack으로 패키징하기 위해 수행해야 할 작업

php中世界最好的语言원래의: 2018-03-17 15:25:231670검색

이번에는 지정된 JS 파일을 webpack으로 패키징하는 방법을 보여드리겠습니다. 지정된 JS 파일을 패키징하기 위한 webpack의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

Background

최근에 요청을 받았습니다. 프론트엔드 패키지에서 접속하는 백엔드 IP가 확실하지 않아서 프로젝트에서 IP 구성 파일을 분리해야 합니다. IP의 운영 및 유지 관리. 따라서 지정된 파일을 별도로 패키징하려면 webpack을 사용해야 합니다.

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: './dist/', //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: '[name].[chunkhash].js', // 输出文件名
 chunkFilename: '[name].[chunkhash].js' // 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 자체는 modularity를 기반으로 하므로 대부분의 경우 하나의 항목 파일만 필요합니다. . 완료. 이 요구 사항을 충족하려면 이 항목 외에 항목 파일을 앱에 추가해야 합니다. 즉,

 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: 'ip', minChunks: Infinity}),

를 추가하세요.

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

CopyWebpackPlugin

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

해결 과정:

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

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

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 패키징 문제를 해결합니다.

ps: 저와 공유할 수 있는 더 좋은 방법이 있었으면 좋겠습니다.

지정된 JS 파일을 별도로 패키징하는 웹팩 방식은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!