티스토리 뷰

Tip and Error/ETC

Vue 프로젝트 구성(w. webpack) - 1

geonwoopaeng@gmail.com 2022. 5. 10. 02:20

webpack

해당 부분을 읽어보면 좋아서 우선적으로 적어 놓았고 이것 또한 파일을 모아서 처리하는 방식입니다.
차근차근 진행을 해보겠습니다.

🐱 1. npm 기본 설정

> npm init -y
> npm i vue@next

npm init -y: 프로젝트를 시작하기 위한 기본 설정
=> package.json 생성

npm i vue@버전: vue의 버전 설치(@next)
=> node_modules, package-lock.json 생성

🐱 2. 폴더 및 파일 관리

다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다.

📦src  
 ┣ 📜App.vue  
 ┣ 📜index.html  
 ┗ 📜main.js

> main.js

//별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기 때문
import  *  as  Vue  from  'vue'; 
import  App  from  './App.vue';

Vue.createApp(App).mount('#app');

> App.vue

구조를 잘 파악하는 것이 정말 좋습니다.

<style scoped>: <style>유효 범위를 현재 component까지만 적용!!
<style lang="scss">: scss를 적용 -> 밑의 과정 후 하는 것이 좋습니다. :)

<template>
    // html 요소
    <div>{{msg}}</div>
</template>

<script>
  export default {
    data() {
      return {
        msg: "hello"
      }
    }
  }
</script>

<style scoped lang="scss">
</style>

> index.html

앞의 parcel 설정할 때랑 다른 것이
이곳에서는 <script type="module" src="./main.js"></script>를 작성하지 않습니다.

<!DOCTYPE  html>
<html  lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

🐱 3. webpack setting

🐯 1. 일반, terminal 실행할 수 있는 webpack, webpack-cli

webpack의 아주 기본적인 것들 설치

> 설치

webpack: 일반적인 webpack 기능
webpack-cli: webpack을 terminal에서 입력가능 하게 하는 기능

> npm i -D webpack webpack-cli

-D: devDepedencies에 설치

> package.json 설정

scripts를 통해 쉽게 run하기 위해 간단한 setting

"scripts": {
  "build": "webpack"
}
// 실행 방법
> npm run build

> webpack.config.js 설정

Node.js 환경에서만 실행이 가능합니다.
entry: 진입점: 어떤 파일로 진입해서 해석할 것인가?
output: 해석 완료후 결과물 반환
resolve: import 할 때 경로 별칭, 확장자 생략
(import App from './src/App.js' -> import App from '~/App')

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.vue', '.js'], //확장자 생략 부분
    alias: {//'src'를 특정 절대위치로 설정('src'부터)
      '~': path.resolve(__dirname, 'src')
    }
  },
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    filename: 'hello.js', //해석완료 후 이름
    clean: true, // dist/ 내부 불필요한 file 제거
  },
}

경고 메세지에 관한 추가)
mode option 명시해 주기

mode: 'production' //제품용
mode: 'development' //개발용

두가지 가 있으며 주로 package.json 파일의 "scripts" 부분에서 명시해 준다.

"scripts": {
  "build": "webpack --mode production"
}

🐯 2. 개발 환경 서버 구성하기 위한 webpack-dev-server

HMR(Hot Module Replacement): 코드가 바뀌면 바로바로 반영되는 것

> 설치

> npm i -D webpack-dev-server

> package.json 설정

"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

> webpack.config.js 설정

해당 부분은 안써주고 기본 포트로 하는 경우가 많습니다.

// const path = require('path');

module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true, // dist/ 내부 불필요한 file 제거
  // },
  devServer: {
    port: 8080,
  }
}
반응형
저작자표시 비영리

'Tip and Error > ETC' 카테고리의 다른 글

Storybook 시작하기  (0) 2022.05.26
Vue 프로젝트 구성(w. webpack) - 2  (2) 2022.05.10
Vue 간단 프로젝트 구성(w. Parcel)  (2) 2022.05.09
Window 랑 Mac 협업시 문제점(그냥 간단 Tip)  (2) 2022.04.20
one-way hash function(Password)  (0) 2022.03.21
공지사항
최근에 올라온 글