-
Vue 3-1 웹팩 사용하기React/React 2023 2023. 2. 6. 13:32728x90
- 사용할 폴더로 들어간다
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'React > React 2023' 카테고리의 다른 글
React 002-1 State,Event (0) 2023.01.02 React001-3 리액트 기초 및 연습 (0) 2022.12.31 React 001-2 리액트에 많이 사용되는 자바스크립트 (0) 2022.12.31 React 001-1 리액트란? (1) 2022.12.31 React 000 (0) 2022.12.30