前端 - webpack如何打包script标签引入的代码

Question

比如我的库文件vue，vuex 这些都是通过cdn 使用script加载到html，那我在打包的时候 就不会去打包库文件，而是使用我的script的资源。那我源码里面就不能使用require('vue') 这种代码。这个应该如何解决

Answer 1

먼저 패키징하는 번들 파일이 지원하는 모듈 사양을 확인해야 합니다. 저는 umd를 선호하므로 제가 패키지하는 번들 파일은 모두 umd입니다. 즉, commjs, amd 및 전역 모듈 형식을 지원합니다. 다행스럽게도 vue에서 출시한 패키지도 umd인데, 이는 webpack에서 패키징한 번들과 동일하다는 의미입니다.

두 번째로, umd는 모듈을 어떻게 참조합니까? requirejs와 같은 모듈 엔진을 사용하지 않으면 스크립트 태그를 통해 모듈 파일을 직접 가져옵니다. 예를 들어 webpack으로 패키징한 여러 개의 번들 파일을 동시에 도입하면 이들 파일 간에 실제로는 전역 모드를 통해 서로를 참조하게 되며 실제로는 객체가 창에 걸려 두 번째 번들 파일에서 직접 사용됩니다. 창에 걸린 이 객체는 전역 변수로 사용될 수 있습니다. 위에서 vue는 umd를 따른다고 했으니 두 개의 스크립트 태그를 통해 vue와 자신의 번들 파일을 소개할 때 window.Vue를 통해 vue를 참조할 수 있습니다.

셋째, 번들의 스크립트 태그에 의해 도입된 vue를 어떻게 참조해야 합니까? 위 네티즌의 외설물을 활용해보세요. 이 vue를 참조하려면 externals rule을 작성해야 합니다. externals를 사용하는 방법은 webpack 공식 홈페이지를 참조하면 되지만 공식 홈페이지의 설명이 너무 간단해서 공식 홈페이지의 예제를 바탕으로 블로그를 작성했습니다. 외부에 대해 자세히 설명하고 싶으시면 아래에서 읽어보실 수 있습니다. 귀하의 경우 외부 항목에는 다음이 포함되어야 합니다.

{ 외부: [ { 뷰: '뷰', jQuery: 'jQuery', ... } ... ] }

위 내용은 웹팩 구성의 일부입니다. 소스 코드에서 다음과 같이 사용하세요.

'vue'에서 vue 가져오기

패키지 번들 파일을 보면 전역 모드에서 전역 변수 Vue가 할당되는 것을 볼 수 있습니다.

Answer 2

vue vuex 추출;

 항목: {
    'vue': ['vue,''vuex']
  },

플러그인에 쓰기:

const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
new CommonsChunkPlugin({ 이름: ['vue'], 파일 이름: '폴더 이름/[이름].js'}),

이렇게 하면 require('vue') 여부에 관계없이 vue, vuex 등이 별도의 폴더명/vue.js에 생성됩니다. Strong>
그리고 vue.js에 포함된 콘텐츠는 다른 webpack 항목 js 파일에 패키징되지 않습니다.

Answer 3

외부 항목을 사용하되 여전히 require를 사용하세요