이번에는 WebPack으로 Vue 멀티 페이지를 구성하는 단계에 대해 자세히 설명하겠습니다. WebPack으로 Vue 멀티 페이지를 구성할 때 주의사항은 무엇인가요?
WebPack은 나를 수천 번 고문했고 나는 그녀를 첫사랑처럼 데려갔습니다. 프로젝트의 프론트엔드 페이지는 거의 작성이 완료되었고, webpack은 설정이 거의 0에 가까워서 작동한다고 볼 수 있습니다. 이제 백엔드 관리 인터페이스를 작성하고 존재하지 않는 별도의 프로젝트를 시작해야 합니다. 그래서 인터넷에서 많은 기사를 검색했는데, 그 중 많은 기사가 프로젝트의 구조를 수정했습니다. vue-cli가 하는 방식이 왜 계속해서 수정되어야 하는지 모르겠습니다. 저처럼 프론트엔드를 처음 접하는 사람은 webpack의 설정을 바꾸면 프론트엔드 부분이 실행이 안되는 경우가 있습니다. . .
그래서 다음 메모가 있습니다.
먼저 프로젝트 구조를 살펴보세요.
├── build
├── config
├── src
│ ├── api
│ ├── 자산
│ ├── 구성 요소
│ ├── 페이지
│ ├── 라우터
│ ├── utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├ ─ ─ admin.js
│ └── Admin.vue
├── static
│ └── Images
├── README.md
├── admin.html
├── index.html
├─ ─ package.json
└── Yarn.lock
admin.html
및 src 폴더 아래에는 Admin.vue 및 admin.js 외에도 api, Pages, vuex 및 vue-cli로 초기화되는 가장 일반적인 프로젝트 구조입니다.
내가 원하는 것은 배경 관리 인터페이스 admin.html에 대한 입구를 추가하는 것입니다. 공유할 수 있는 다른 항목은 공유됩니다.
webpack.base.conf.js
~buildwebpack.base.conf.js를 열고 항목을 찾은 다음 여러 항목을 추가하세요.entry: { app: './src/main.js', admin: './src/admin.js' //新增 },이런 방식으로 컴파일을 실행하면 각 항목이 청크에 해당됩니다. .
개발 구성 수정 실행
Open·~buildwebpack.dev.conf.js·, 플러그인에서 HtmlWebpackPlugin을 찾아 그 뒤에 해당하는 여러 페이지를 추가하고 다음과 같이 각 페이지에 대한 청크 구성을 추가합니다.new HtmlWebpackPlugin({ filename: 'index.html', //生成的html template: 'index.html', //来源html inject: true, chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源 }), new HtmlWebpackPlugin({ filename: 'admin.html', template: 'admin.html', inject: true, chunks: ['admin'] }),
실행 빌드 구성 수정
Modify config/index.js
~configindex.js를 열고 빌드 아래에서 인덱스를 찾습니다: path.resolve(dirname, '../ dist/index. html'), 그 뒤에 여러 페이지 추가:
admin: path.resolve(dirname, '../dist/admin.html'),Modify webpack.prod.conf.js
Open ~ buildwebpack.prod.conf.js, 플러그인에서 HtmlWebpackPlugin을 찾아 그 뒤에 해당하는 여러 페이지를 추가하고 각 페이지에 청크 구성을 추가하세요.new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'app'] }), new HtmlWebpackPlugin({ filename: config.build.admin, template: 'admin.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'admin'] }),End글쎄, 없으면 안 됩니다. 어떤 프로젝트 구조가 수정되더라도 프로세스가 복잡할수록 실수할 확률이 높아집니다. 위의 웹팩 구성은 간단하고 이해하기 쉽습니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:
webpack을 사용하여 React 개발 환경을 구축하는 단계에 대한 자세한 설명
Nodejs가 전역적으로 모듈을 설치한 후에는 명령 처리 방법을 찾을 수 없습니다
위 내용은 WebPack으로 Vue 다중 페이지를 구성하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!