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가 있습니다

build/webpack.base.conf.js

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

에서 항목을 수정하세요.

다음 단계는 패키지된 파일을 html에 삽입하는 방법입니다. 여기서는 html-webpack-plugin 플러그인을 사용하여 이 문제를 해결합니다. 먼저 html 템플릿 파일이 있어야 하며 기본 html-webpack을 변경해야 합니다. -webpack 구성에서 플러그인 플러그인 구성

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue 선택 작업 구성 요소가 활성화되었습니다

Vue2 라우팅 탐색 후크를 캡슐화하여 실제 전투에서 사용하세요

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