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

이번에는 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 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

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

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