<!-- index.html --> <!doctype html> <html> <head></head> <body> <div id="app"></div> </body> <script src="./dist/build.js"></script> </html> | cs |
웹팩 빌드 결과물을 확인하기 위해 index.html 이란 파일을 만들어서 빌드된 결과물을 코드로 직접 작성했다.
이런 html 파일을 만들지 않고 결과물을 확인할 수 있게 해주는 플러그인이 htmlWebpackPlugin 이다.
위와 같이 직접 작성한 index.html 파일을 플러그인이 만들어준다.
index.html 파일은 삭제해준다.
npm install --save-dev vue-html-webpack-plugin |
의존성 추가.
// webpack.config.js const HtmlWebpackPlugin = require('vue-html-webpack-plugin'); module.exports = { //... plugins: [ new HtmlWebpackPlugin({ vue: true }) ] } | cs |
plugin 추가.
vue를 true로 해준다.
$ npm run dev | cs |
dev server를 실행해보면
기존과 같은 화면이 나온다.
$ npm run build | cs |
로 실제로 나오는 dist/index.html 파일을 확인해보자.
// dist/index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <div id="app"></div><script type="text/javascript" src="build.js"></script></body> </html> | cs |
html-webpack-plugin을 처음에 사용했었는데 이걸 사용하면 app을 id로 하는 엘리먼트가 없어서 "cannot get / " 에러를 뱉는다.
vue-html-webpack-plugin을 사용하면 이 에러를 방지할 수 있다.
조금 더 상세히 보자면 위는 /node_modules/vue-html-webpack-plugin/index.js 의 일부이다.
만약 vue option이 true라면 <div id="app">을 추가한다.
div 태그의 id가 "app"으로 되어있으므로 src/index.ts 파일의 Vue el옵션은 "#app"이어야 한다.
vue-html-sebpack-plugin에서 html 생성시 div id를 변경해주는 옵션이 있는지는 더 찾아봐야 알 것 같다.
참고 : https://www.npmjs.com/package/vue-html-webpack-plugin?activeTab=readme
참고 깃허브 : add 'vue-html-webpack-plugin'
'Front-End (web)' 카테고리의 다른 글
| [Typescript] 얕은 복사 (0) | 2019.07.24 |
|---|---|
| [Typescript] openAPI 문서 모델을 typescript interface로 전환하기 (0) | 2019.07.20 |
| [Vue.js / Vuex] 전역상수 (0) | 2018.12.03 |
| jsp -> vueJs 전환 기록 (0) | 2018.11.06 |
| [Vue] 상수 사용 (0) | 2018.11.01 |
댓글