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 및 경로 모듈은 자신의 프로젝트 구성에 따라 변경할 수 있습니다. 여기서는 src/modules/ 폴더 아래의 디렉터리가 모듈로 사용됩니다. 항목 파일

.base.conf.js의 빌드/웹팩 항목 수정

const entryObj = require('./entry')
module.exports = {
 entry: entryObj
}

다음 단계는 패키지된 파일을 HTML에 삽입하는 방법입니다. 여기서는 html-webpack-plugin 플러그인을 사용하여 이 문제를 해결합니다. HTML 템플릿 파일을 만든 다음 웹팩 구성에서 기본 html-webpack-plugin 플러그인 구성을 변경하세요

build/plugins.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

build/webpack.dev.conf.js 구성을 수정하세요

module.exports = {
  plugins: configPlugins
}

이 기사의 사례 등을 읽으신 후 방법을 마스터하셨다고 믿습니다. 얼마나 흥미롭습니까? PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

bing Map 사용 단계에 대한 자세한 설명

node+token 구현 확인

위 내용은 vue-cli 다중 모듈 패키징 및 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!