webpack에서 제대로 외부 라이브러리를 추출하는 방법에 대한 설명

우리가 webpack으로 패키징할 때, 종종 제삼자 라이브러리를 독립적으로 추출하여 안정된 버전의 파일로 사용하고, 브라우저 캐시를 통해 요청 횟수를 줄이고 싶습니다. 제삼자 라이브러리 추출 방법은 일반적으로 두 가지가 있습니다

1. CommonsChunkPlugin
2. DLLPlugin

차이점: 첫 번째 방법은 매번 패키징할 때 제삼자 라이브러리도 패키징합니다. 두 번째 방법은 매번 패키징할 때 프로젝트 파일만 패키징하며, 첫 번째 패키징에서 생성된 제삼자 압축 파일을 참조하면 됩니다

CommonsChunkPlugin 방법 소개

vue를 예로 들어 설명합니다

const vue = require('vue')
{
 entry: {
 // bundle은 우리가 패키징할 프로젝트 파일의 내보내는 이름이며, app은 엔트리 js 파일입니다
 bundle: 'app',
 // vendor는 우리가 패키징할 제삼자 라이브러리이며, 최종 생성된 파일 이름입니다. 배열에 패키징할 제삼자 라이브러리가 들어갑니다. node_modules에 있지 않으면, 라이브러리의 구체적인 주소를 작성할 수 있습니다
 vendor: ['vue']
 },
 output: {
  path: __dirname + "/bulid/','
 // 파일 이름
 filename: '[name].js'
 },
 plugins: {
 // 여기서 webpack.optimize.CommonsChunkPlugin 생성자 함수를 인스턴스화합니다
 // 패키징이 끝나면 vendor.js 파일이 생성됩니다
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

그런 다음 생성된 파일을 html 파일에 포함하여 패키징합니다

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPlugin 방법 소개

먼저 두 개의 파일을 준비합니다

1. webpack.config.js
2. webpack.dll.config.js

webpack.dll.config.js 파일 설정은 다음과 같습니다

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/','
 library
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist')/[name]-manifest.json'),
  // 이는 위에서 output.library 옵션과 일치해야 합니다
  name: library
 }),
 ],
}

그런 다음 webpack.config.js 파일 설정은 다음과 같습니다

const webpack = require('webpack')
module.exports = {
 entry: {
 app: '.',/src/index
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/','
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 }
 ]
}

그런 다음 실행

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

HTML 참조 방식

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

이것이 본문의 모든 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 노래教程에 많은 지지를 부탁드립니다.

명시: 본문의 내용은 인터넷에서 가져왔으며, 원저자의 소유입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 본 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있으면 이메일로 notice#w에 문의해 주세요.3codebox.com에 이메일을 보내서 (#을 @으로 변경하세요) 신고하시고 관련 증거를 제공해 주시면, 해당 내용이 사실이 확인되면 즉시 해당 내용을 삭제하겠습니다.