인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다.
설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~
사이트 주소 : https://www.inflearn.com/course/web-game-vue/#
웹펙의 사용이유
-
웹펙 관리의 어려움보다 스크립트 관리의 어려움이 커질때 웹펙이 필요하다.
-
웹펙을 사용하려면 노드를 사용해야하는데, node 홈페이지에서 LTS node버전을 받는 것을 추천한다.
-
노드를 설치하면 npm을 사용할 수 있는데, 이는 남이 작성한 자바스크립트 라이브러리를 사용할 수 있도록 도와준다.
-
npm init을 하면 package.json파일이 생기는데 이는 내가 사용한 남의 자바스크립트에 대한 이력이 들어간다.
-
각각의 소스코드의 버전관리에 용이하다. (정확하게 몇버전의 소스코드를 썼는지 기억할수 있다.)
-
남의 소스코드를 패키지라고 부른다.
-
package.json의 -D옵션은 개발용으로만 해당 패키지를 쓰겠다는 의미이다.
-
-D대신 —save-dev를 입력해도 같은 의미이다.
-
-D옵션을 통해 설치한 패키지는 dependencies가 아닌 devDependencies에 버전이 명시된다.
-
개발할때만 필요하고 배포할때는 필요하지가 않다.
-
npm init
npm i webpack webpack-cli -D
npm i webpack webpack-cli -D
-
package.json의 옵션
-
“license" : “ISC"
-
해당 프로젝트의 라이센스
-
-
“main” : “index.js"
-
해당 프로젝트의 가장 중요한 파일
-
-
“version” : 1.0.0
-
해당 프로젝트의 버전
-
-
-
node를 i(install)을 하면 node-modules 폴더와 package-lock.json이라는 파일이 생성된다.
-
node-modules는 우리가 설치한 패키지들과 더불어서, 해당 패키지들이 사용하고있는 패키지도 같이 설치가 된다.
-
webpack.config.json은 module.exports = {}로 시작한다.
-
module.exports = {} 는 노드에서 모듈을 만드는 부분이라고 생각하면 된다. (추후 공부)
-
-
위에서 만든 모듈 객체를 웹팩이 웹팩 처리를 할때 사용하는데 이를 웹패킹이라고 한다.
-
webpack.config.json의 옵션에는 entry, module, plugins, output 이 4가지가 중요하다.
-
나머지 옵션은 다 부가적인 설정이다.
-
이해를 쉽게 하기 위에서는 entry -> module -> plugins -> output 이순서로 속성값을 구성해놓으면 편리하다.
-
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: {
app: path.join(__dirname, 'main.js')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
}],
},
plugins: [
new VueLoaderPlugin(),
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
},
};
-
webpack.config.json 옵션
-
entry
-
웹팩은 여러 스크립트를 하나로 합치기 위해 사용한다.
-
스크립트에서 가장 대표가 되는 파일을 말한다.
-
app은 하나로 합쳐질 파일 이름이다.
-
entry의 app도 임의로 지은 이름이다.
-
-
module
-
웹펙의 가장 중요한 핵심부이다.
-
rules안에 자바스크립트를 합칠 때 어떻게 합치고, 어떻게 처리할지에 대한 정보를 명시한다.
-
-
output
-
output에서는 하나로 합쳐질 파일에 대한 정보를 나타낸다.
-
filename을 통해 하나로 합쳐질 파일의 이름을 지정할 수 있다.
-
filename: ‘app.js'
-
filename: [name].js : 알아서 app이 name에 들어간다.
-
-
path
-
최종 결과 js파일의 폴더의 경로를 나타낸다.
-
보통 dist를 많이 쓴다.
-
-
-
-
webpack을 사용하면 HTML을 간단하게 표현할 수 있다.
<body>
<div id=“root”></div>
<script src=“/dist/app.js”></script>
</body>
'웹 프론트엔드 > Vue.js, Jquery, PWA' 카테고리의 다른 글
| Vue.js : Webpack 설정하기 : [강좌 3-3강 정리] (1) | 2020.12.20 |
|---|---|
| Vue.js - template, script, style 알아보기 [강좌 3-2강정리] (0) | 2020.11.23 |
| Vue.js - 전역 component / template / vue data / props / [강좌 2강정리] (0) | 2019.12.17 |
| Vue.js - v-if v-else 디렉티브 / 보간법 / v-model / ref [강좌 1강정리] (0) | 2019.12.03 |
| PWA란? PWA의 특징 (0) | 2018.09.28 |
