1. jquery
npm으로 설치
$ npm install -s jquery
2.index.html에 test 용 #id
추가
<div id="JQTest">Test</div>
3.index.js
에 “Test”를 “Index.js First Write!”로 변경
$("#JQTest").html("<h1>Index.js First Write!</h1>");
4.bootstrap 사용을 위해 npm설치 후 아래와 같이 추가
import $ from "jquery"; import boots from "bootstrap";
5.하지만 JQuery를 찾을 수 없다는 error
발생
Uncaught ReferenceError: jQuery is not defined at Object.dismiss (bundle.js:10420) at __webpack_require__ (bundle.js:20) at Object.$.fn.emulateTransitionEnd.called (bundle.js:10345) at __webpack_require__ (bundle.js:20) at Object.<anonymous> (bundle.js:74) at __webpack_require__ (bundle.js:20) at Object.defineProperty.value (bundle.js:63) at bundle.js:66
6.해결책
webpack.config.json 파일에 webpack plugin 설정 추가
var path = require('path'); var webpack = require('webpack'); ... module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), ] }