본문 바로가기

webpack7

[Webpack] case sensitive paths plugin $ webpack --mode=development Mac에서 위와 같이 build 하는 스크립트를 실행하면 문제 없이 잘 돌아가는데 docker에서 실행하면 에러가 발생하는 경우가 있다. > ts-vue@1.0.0 build /homepage > webpack --mode=development Hash: 70e9fe19d88415050f7f Version: webpack 4.38.0 Time: 3973ms Built at: 08/14/2019 10:05:57 AM Asset Size Chunks Chunk Names build.js 1.22 MiB main [emitted] [big] main index.html 202 bytes [emitted] Entrypoint main [big] = build... 2019. 8. 14.
[Webpack][Error] custom keyword definition is invalid C:\...\node_modules\ajv\lib\keyword.js:65 throw new Error('custom keyword definition is invalid: ' + this.errorsText(validateDefinition.errors)); ^ Error: custom keyword definition is invalid: data/errors should be boolean at Ajv.addKeyword (C:\...\node_modules\ajv\lib\keyword.js:65:13) at module.exports (C:\...\node_modules\ajv-errors\index.js:10:7) at Object. (C:\...\node_modules\schema-utils\.. 2019. 2. 16.
[게시판] vue-markdown-loader 추가 npm i --save-dev vue-markdown-loadercsvue-markdown-loader 의존성 추가. // webpack.config.js module.exports = { //... module: { rules: [ // .md 로더 추가. { test: /\.md$/, use: [ { loader: 'vue-loader' }, { loader: 'vue-markdown-loader/lib/markdown-compiler', options: { raw: true } } } ] }, resolve: { extensions: ['.ts', '.js', '.vue', '.json', '.md'], // .md 추가cs 공식 깃헙에서 알려주는대로 웹팩 설정 추가한다.vue-loader 버전을 .. 2019. 2. 12.
[게시판] List 컴포넌트 생성 List 컴포넌트 추가.123456789101112131415// src/components/List.vue List import { Vue, Component } from "vue-property-decorator"; @Componentexport default class List extends Vue {}Colored by Color ScriptercsList 컴포넌트를 .vue 파일로 SFC(Single File Component)로 만들었다.기존 ts-vue에는 .ts와 .html 파일로 나눠서 만들었지만 파일하나가 관리가 쉬워서 걍 이렇게 하려고 한다. 12345678910111213141516171819// src/index.ts // ... // @ts-ignoreimport List fro.. 2019. 2. 11.
[Vue.js/Webpack] vue-html-webpack-plugin으로 임시 html 만들기 참고 : [Vue.js/Typescript/Webpack] 2. webpack-dev-server 설정 Colored by Color Scriptercs 웹팩 빌드 결과물을 확인하기 위해 index.html 이란 파일을 만들어서 빌드된 결과물을 코드로 직접 작성했다.이런 html 파일을 만들지 않고 결과물을 확인할 수 있게 해주는 플러그인이 htmlWebpackPlugin 이다. 위와 같이 직접 작성한 index.html 파일을 플러그인이 만들어준다. index.html 파일은 삭제해준다. npm install --save-dev vue-html-webpack-plugin의존성 추가. // webpack.config.js const HtmlWebpackPlugin = require('vue-html-we.. 2018. 12. 17.
[Vue.js/Typescript/Webpack] 2. webpack-dev-server 설정 npm install webpack-dev-server --save-devcswebpack-dev-server를 devDependencies에 추가한다. // webpack.config.jsdevServer: { historyApiFallback: true, // noInfo: true port: 8081},csnoInfo는 스크립트 실행결과를 확인하기 위해 주석처리 해주었다.port는 8080에는 젠킨스가 떠있어서 8081로 했다. // index.html Colored by Color Scriptercs 기존에 dist/index.html 파일을 루트 폴더 위치로 옮기고 script build.js도 변경한다.이렇게 하면 dev server가 켜지면서 위 파일을 참고하게 될 것이다. // packag.. 2018. 11. 26.