이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!