vue-cli를 사용하여 다중 모듈 패키징을 확장하는 방법

php中世界最好的语言
풀어 주다: 2018-05-25 14:50:50
원래의
1799명이 탐색했습니다.

이번에는 vue-cli를 사용하여 멀티 모듈 패키징을 확장하는 방법과 vue-cli를 사용하여 멀티 모듈 패키징을 확장할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다. .

Scenarios

실제 프로젝트 개발에는 이러한 시나리오가 있을 것입니다. 프로젝트에는 여러 모듈(단일 페이지 또는 다중 페이지 애플리케이션)을 함께 사용해야 하며, vue-cli는 기본적으로 단일 항목 패키징만 제공합니다. . 그래서 vue-cli를 확장하려고 생각했습니다

implementation

먼저 webpack이 다중 항목 패키징을 제공한다는 것을 알아야 합니다. 그러면 여기에서 변환을 시작할 수 있습니다

New build/entry.js

const path = require('path')
const fs = require('fs')
const moduleDir = path.resolve(dirname, '../src/modules')
let entryObj = {}
let moduleItems = fs.readdirSync(moduleDir)
moduleItems.forEach(item => {
 entryObj[`${item}`] = `./src/modules/${item}/main.js`
})
module.exports = entryObj
로그인 후 복사

여기서 Nodejs는 fs 및 경로 모듈을 사용합니다. http://nodejs.cn/api/fs.html, http://nodejs.cn/api/path.html 문서를 볼 수 있으며 원하는 대로 변경할 수 있습니다. 프로젝트 구성은 src/입니다. module/ 폴더 아래의 디렉토리는 모듈로 사용됩니다. 각 모듈에는 항목 파일로 main.js가 있습니다. 다음 단계. 파일을 html에 삽입하는 방법입니다. 여기서는 html-webpack-plugin 플러그인을 사용하여 이 문제를 해결합니다. 그런 다음 기본 html-webpack-을 변경해야 합니다. webpack 구성에서 플러그인 플러그인 구성build/plugins .js 추가

const entryObj = require('./entry')
module.exports = {
 entry: entryObj
}
로그인 후 복사

build/webpack.dev.conf.js 구성 수정

const HtmlWebpackPlugin = require('html-webpack-plugin')
let configPlugins = []
Object.keys(entryObj).forEach(item => {
 configPlugins.push(new HtmlWebpackPlugin(
  {
   filename: '../dist/' + item + '.html',
   template: path.resolve(dirname, '../index.html'),
   chunks: [item]
  }
 ))
})
module.exports = configPlugins
로그인 후 복사

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

추천 도서:

Angular 프로젝트에서 scss를 사용하는 단계에 대한 자세한 설명

webpack으로 패키지된 대용량 파일을 처리하는 방법

위 내용은 vue-cli를 사용하여 다중 모듈 패키징을 확장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!