320x100
npm install webpack-dev-server --save-dev | cs |
webpack-dev-server를 devDependencies에 추가한다.
// webpack.config.js devServer: { historyApiFallback: true, // noInfo: true port: 8081 }, | cs |
noInfo는 스크립트 실행결과를 확인하기 위해 주석처리 해주었다.
port는 8080에는 젠킨스가 떠있어서 8081로 했다.
// index.html <!doctype html> <html> <head></head> <body> <div id="app"></div> </body> <script src="./dist/build.js"></script> </html> | cs |
기존에 dist/index.html 파일을 루트 폴더 위치로 옮기고 script build.js도 변경한다.
이렇게 하면 dev server가 켜지면서 위 파일을 참고하게 될 것이다.
// package.json "scripts": { // 추가 "dev": "webpack-dev-server --open", } | cs |
webpack-dev-server을 실행하는 스크립트를 추가한다.
$ npm run dev | cs |
위 명령어로 실행.
script에서 --open 옵션을 줬기 때문에 자동으로 localhost:8081이 열릴것이다.
결과 확인.
320x100
'Front-End (web) > Vue.js Typescript' 카테고리의 다른 글
| [Vue.js/Typescript] 6. ES Lint (0) | 2019.08.10 |
|---|---|
| [Vue.js/Typescript] 5. Popup (0) | 2019.08.08 |
| [Vue.js/Typescript] 4. Vue-router (0) | 2019.03.11 |
| [Vue.js/Typescript] 3. Vuex - State, Getter (0) | 2019.01.26 |
| [Vue.js/Typescript/Webpack] 1. 프로젝트 생성 (0) | 2018.11.21 |
댓글