1. Vue WebPack Project 만들기
webpack - hot-reload, linting, 테스트 및 CSS 추출 기능을 갖춘 대부분의 기능을 갖추고 있는 Webpack + vue-loader 설정입니다.
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
쉘에서 vue init webpack my-project를 입력하면 아래와 같이 설정 인터페이스 화면이 나옵니다. 본인의 프로젝트에 맞게 설정하시면 됩니다.
% vue init webpack WD-webpack
? Project name wd-webpack
? Project description A Vue.js project
? Author david <sncap7@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "WD-webpack".
# Installing project dependencies ...
# ========================
실행하기 위해서는 npm run dev를 실행하면 다음과 같이 진행됨.
% npm run dev
DONE Compiled successfully in 2677ms 오후 7:09:51
I Your application is running here: http://localhost:8080
web pack프로젝트 구조
. ├── build/ # webpack config files
│ └── ... ├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests
│ │ ├── index.js # test build entry file
│ │ ├── jest.conf.js # Config file when using Jest for unit tests
│ │ └── karma.conf.js # test runner config file when using Karma for unit tests
│ │ ├── setup.js # file that runs before Jest runs your unit tests
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore.js # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
정적 자원 처리
프로젝트 구조를 보면 정적 자원들을 위한 src/assets와 static/ 2개의 디렉터리가 잇는 것을 확인할 수 있습니다. 이 둘의 차의점은 웹펙에 의해 처리되느냐 안되느냐의 차이점입니다.
├── src/
│ └── assets/ # module assets (processed by webpack) # 웹팩에서 처리
│ ...
├── static/ # pure static assets (directly copied) # 별도 처리
웹팩에 처리되는 자원들
우선 웹팩이 정적 자원들을 어떻게 처리하는지 이해할 필요가 있습니다. *.vue 컴포넌트 안에서 모든 html 템플릿과 CSS들은 URL 경로를 찾기 위해 vue-html-loader와 css-loader에 의해 분석됩니다. 예를들어 <img src="./logo.png">, background: url(./logo.png)에서 "./logo.png"는 상대 경로를 나타내며 모듈 디펜던시로 웹팩에 의해 처리됩니다.
왜냐하면 logo.png는 자바스크립트가 아니기 때문에 모듈 디펜던시로 취급되어 url-loader와 file-loader로 처리할 필요가 있습니다. 이 로더들은 기본적으로 탑재되어 있기 때문에 배포를 위해 상대/모듈 경로를 신경쓸 필요가 없습니다.
실제 정적 자원들
위와는 반대로 static/에 위치하는 파일들은 웹팩에 의해 처리되지 않습니다. 이들은 최종 경로에 같은 이름으로 복사됩니다. config.js에 있는 build.assetsPublicPath와 build.assetsSubDirectory에 의해 결정되어지는 절대경로를 이용하여 이 파일들에 접근할 수 있습니다.
아래는 기본 값으로 설정되어 있는 예시입니다.
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
위의 구성을 따르면 static/에 위치하는 파일들은 절대 경로인 /static/[filename]으로 접근할 수 있습니다. 만약 assetsSubDirectory를 assets으로 바꾼다면 /assets/[filename]으로 파일에 접근할 수 있습니다.
환경 변수
보통 test, development, production 환경에 따라 다른 구성이 필요할 때가 많습니다.
예를 들면 다음과 같습니다.
// config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
DEBUG_MODE: false,
API_KEY: '"..."' // this is shared between all environments
}
// config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})
// config/test.env.js
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
주의: string 변수는 '"..."'로 사용해야합니다.
test.env는 dev.env를 상속받으며, dev.env는 prod.env를 상속 받습니다.
코드에서 다음과 같이 환경 변수를 사용할 수 있습니다.
Vue.config.productionTip = process.env.NODE_ENV === 'production'Backend 프레임워크와 통합하기
만약 정말 순수한 정적앱(backend API와 독립적인)을 만든다면, config/index.js를 수정할 필요가 없습니다. 만약 backend 프레임워크와 통합한다면, frontend 파일들을 backend 프로젝트에 넣기 위해서는 config/index.js를 수정해야합니다.
아래는 config/index.js의 기본 값입니다.
// config/index.js
'use strict'
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost',
port: 8080,
// skipping other options as they are only convenience features
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// skipping the rest ...
},
}Typescript 적용하기
vue add typescriptinit webpack과 별도로 진행되므로 따로 실행시켜줘야 함.
$ vue add typescript
📦 Installing @vue/cli-plugin-typescript...
added 198 packages in 22s
74 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: @vue/cli-plugin-typescript
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use TSLint? Yes
? Pick lint features: Lint on save
? Convert all .js files to .ts? Yes
? Allow .js files to be compiled? No
? Skip type checking of all declaration files (recommended for apps)? (Y/n) Y
vue init으로는 typescript가 설치되지 않아서 추가해준다.
version 차이 인지 library 차이인지는 모르지만. webpack 과 typescript, vuetify, i18n 은 같이 설치가 잘 안되고, force로 설치해도.. 적용이 안된다....
그냥 따로 쓰고 vue proxy를 권장한다.
vue.config.js
devServer: {
proxy: {
'/': {
target: 'http://dev3.platform.com/',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/': '/'
}
}
}
}
vue proxy를 쓰는것이 더 쉽다.