Vue 3-1 웹팩 사용하기

React/React 2023

Vue 3-1 웹팩 사용하기

salalsksjwnn 2023. 2. 6. 13:32

728x90

사용할 폴더로 들어간다

npm init

아래와 같이 나오는데 이름을 정해주면 된다.

나머지는 일단 다 엔터

package.json파일이 생긴다 (내가 쓰는 패키지-남의 소스코드)
몇버전 어떤걸 썼는지 기억하기 위해

vue 설치

npm install vue

이제 스크립트 안씀

웹팩 설치

npm i webpack webpack-cli -D

//웹팩이랑 웹팩cli를 설치한다.
//-D 혹은 --save-dev를 통해 개발용으로만 설치하겠다

같은 폴더에 webpack.config.js파일을 생성

// node에 module을 만든 것 이렇게 만든 모듈을 웹팩 처리를 하는데 사용됨 웹팩 설정을 넣으면 됨
module.exports = {
  // 대표가 되는 파일
  entry: {
    // 하나로 합쳐질 파일의 이름
    app: './main.js',
  },
  module: {},
  plugins: {},
  output: {
    //하나로 합쳐질 파일
    filename: 'app.js',
    //합쳐질 파일이 생성될 폴더 경로
    path: '.dist',
  },
};

기본 html이 간단해 진다. 전부 app.js에 합쳐지는 것

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>숫자야구</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
  <div id="root"></div>
  <script src='app.js'></script>

</body>

</html>

module, plugins

// node에 module을 만든 것 이렇게 만든 모듈을 웹팩 처리를 하는데 사용됨 웹팩 설정을 넣으면 됨
module.exports = {
...
  // module이 웹팩의 핵심 rules에서 합칠 때 어떻게 처리할 건지 적이줄 수 있음
  module: {},
  // 부가적임
  plugins: {},
  ...
};

728x90

저작자표시 (새창열림)