webpack Template execution failed 오류

vue에서 webpack을 통해 npm start를 할 경우 아래와 같은 오류가 발생하였다.

"Template execution failed: ReferenceError: testValue is not defined"

spring 서버에서 thymeleaf를 통해 모델 데이터를 아래와 같이 전달해주었는데

/*<![CDATA[*/

var message = /*[[${testValue}]]*/ 'default';

console.log(message);

alert(message);

/*]]>*/

webpack에서 위 소스를 컴파일하면서 ${ 와같은 특수문자를 인식하지 못하는 것 같았다.

해결방법은

먼저 html-loader 플러그인이 없다면 npm install --save html-loader 로 플러그인 설치

npm start 시 오류 발생할 경우 : webpack.dev.conf.js 파일 수정

npm run build 시 오류 발생할 경우 webpack.prod.conf.js 파일 수정

 

수정 내용은 다음과 같다.

plugins 프로퍼티의 값을 아래와 같이 수정한다

 

변경 전

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

 

변경 후

new HtmlWebpackPlugin({

filename: 'index.html',

template: '!!html-loader!index.html',

inject: true

}),