Webpack을 사용하여 Vue3 개발 환경 구축 프로세스 상세 정보

0부터 Webpack을 사용하여 Vue3 개발 환경 구축
항목 만들기
우선 빈 디렉터리를 만들어야 합니다. 이 디렉터리에서 명령줄을 열고 npm init 명령을 실행하여 프로젝트를 만듭니다. 이 과정은 일부 내용을 입력하라고 알려 줍니다. 완성되면 자동으로 패키지를 만듭니다.json 파일
Webpack 구성 파일
project

 project-name
+ |- index.html
 |- package.json
+ |- webpack.config.js
+ |- /src
+ |- index.js

webpack.config.js

'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
 mode: 'development',
 entry: './src/index.js',
 output: {
 filename: 'index.js',
 path: path.resolve(__dirname, 'dist')
 },
 resolve: {
 alias: {
  'vue': '@vue/runtime-dom',
  'vuex': 'vuex/dist/vuex.esm-bundler',
  '@': path.join(__dirname, 'src')
 }
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  use: [
   {
   loader: 'vue-loader'
   }
  ]
  },
  {
  test: /\.css$/,
  use: [
   {
   loader: 'style-loader'
   },
   {
   loader: 'css-loader'
   }
  ]
  },
  {
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'file-loader'
  options: {
   name: 'images/[name].[ext]'
  }
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './index.html'
 }),
 new VueLoaderPlugin()
 ],
 devServer: {
 compress: true,
 port: 8080
 }
}

설치 종속

npm install --save-dev css-loader file-loader html-webpack-plugin style-loader [email protected] @vue/compiler-sfc webpack webpack-cli webpack-dev-server

VueLoaderPlugin의 가져오기 방식이 변경되었습니다

[email protected]현재 자체 지정 버전 필요

vue-template-compiler가 없습니다. @vue/compiler-sfc

가 추가되었습니다.

나머지는 모두 Webpack 기본 구성

Vue

npm install --save [email protected] [email protected] [email protected]

현재 버전을 직접 지정해야 합니다.
루트 어셈블리
project

 project-name
 |- package.json
 |- /src
+ |- app.vue

app.vue

<template>
 <ul>
 <li><router-link to="/">Home</router-link></li>
 <li><router-link to="/about">About</router-link></li>
 </ul>
 <router-view/>
</template>

어셈블리 루트 요소가 여러 개로 허용됨

포털 파일
src/index.js

import { createApp } from 'vue'

import App from '@/app.vue'
import router from '@/router'
import store from '@/store'

createApp(app)
 .use(router)
 .use(store)
 .mount('#app')

Vue2.0의 패키지 가져오기 방식과 달리 Vue3.0은 필요에 따라 가져오는 방식을 사용합니다. 예를 들어 여기는createApp만 가져왔습니다. 이렇게 하면 웹 팩의treeshaking을 지원할 수 있고 사용하지 않은 부분은 최종 패키지 파일에 나타나지 않습니다.
Vue3.0의 응답식 시스템은 ES2015의 Proxy(프록시)를 사용하고 브라우저 호환성 참조CanIUse를 사용합니다. 이 기능은 이전 브라우저를 호환할 수 없습니다.
Router
project

 project-name
 |- package.json
 |- /src
+ |- /router
+  |- index.js

src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
 {
 path: '/',
 component: require('@/views/index.vue').default
 },
 {
 path: '/about',
 component: require('@/views/about.vue').default
 },
 {
 path: '/:catchAll(.*)',
 component: require('@/views/404.vue').default
 }
]

const router = createRouter({
 history: createWebHashHistory(),
 routes
})

export default router

필요에 따라 가져오기 방식

원래의 모드 매개 변수가history

로 변경됨

createWebHashHistory를 제외하고createWebHistory와createMemoryHistory

라우팅이 일치하지 않을 때'/:catchAll(.*)'

구성 요소에서router 사용하기

import { useRouter } from 'vue-router'

export default {
 setup() {
 const router = useRouter()

 //  
 const { push, go, back } = useRouter()
 }
}

router는 원래 실례적인 $router입니다. before Each, after Each 등등의 방법도 있습니다.
구성 요소에서route 사용하기

import { useRoute } from 'vue-router'

export default {
 setup() {
 const route = useRoute()
 }
}

route는 응답식 프록시 대상으로 원래의 $route와 마찬가지로query,params 등 속성

도 있습니다

route를 해체하는 것을 권장하지 않습니다. 해체된query,params는 응답식이 아닙니다

Store
project

 project-name
 |- package.json
 |- /src
+ |- /store
+  |- index.js

이 파일은 Vuex 인스턴스를 생성하고 내보냅니다.
src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
 state: {},
 getters: {},
 mutations: {},
 actions: {}
})

export default store

필요에 따라 가져오기 방식

다른 것은 예전과 다름없다

구성 요소에서store 사용하기

import { useStore } from 'vuex'

export default {
 setup() {
 const { state, getters, commit, dispatch } = useStore()

 return {
  state
 }
 }
}

state는 응답식 프록시 대상입니다.commit을 통해mutations를 제출하지 않고state를 직접 수정해도 됩니다. 컨트롤러는 경고를 하지 않았습니다.
NPM Scripts
패키지에서요.json 파일에 대응하는scripts에 추가 명령
package.json

{
 "scripts": {
 "dev": "webpack-dev-server",
 "build": "webpack"
 }
}

Webpack을 이용하여 Vue3를 구축하는 개발 환경 과정에 대한 상세한 설명은 여기 있습니다. 더 많은 Webpack을 이용하여 Vue3를 구축하는 개발 환경 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!