HTMLWebpackPlugin
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};이 플러그인은 body에 모든 webpack 번들을 포함하는 HTML 파일을 생성하거나, 존재하는 HTML 파일에 웹팩을 통해 만든 JS, CSS 번들을 삽입하는 것을 도와준다.
웹팩 컨피그의 plugin에 저렇게 단순히 추가하는 것만으로도 작동한다.
new HtmlWebpackPlugin({
template: 'public/index.html',
}),나는 template 옵션을 사용했는데, 이러면 public 폴더에 존재하는 index파일에 웹팩을 통해 번들한 JS와 CSS번들을 자동으로 넣어준다.
생겼던 문제점
기존에 html, css와 웹팩으로 번들한 JS를 가지고 만든 앱을 리액트로 바꾸면서 Html WebpackPlugin을 추가하였는데,
예전에 수동으로 HTML파일에 삽입시킨 script 태그를 지우지 않았었다.
<body>
<script src="main.js"></script>
</body>그랬더니 오류가 나진 않았는데, 중복으로 삽입이 되게 되면서 이벤트 리스너가 정상적으로 작동하지 않는 오류가 있었다!
https://stackoverflow.com/questions/66246652/js-events-not-firing-in-webpack-built-react-application
js events not firing in webpack built react application
Spoiler: I am leaning towards a Webpack issue rather than React (since with a plain React app, taken straight form create-react-app things work). But still, it only happens with React... The main i...
stackoverflow.com
이걸 몰라서 이렇게 이벤트 리스너가 작동하지 않는 경우에 dependecy 충돌인 경우도 있다고 하여 node_modules와 yarn.lock을 지우고 다시 설치하는등... 오늘 오랫동안 헤맸다.
git reflog
git reflog 멍령어를 통해 커밋 로그를 확인할 수 있는데 이를 통해서 돌아가고자 하는 커밋 로그를 확인하고
git reset --hard <id> 를 통해서 커밋해놓은 파일을 복구할 수 있다.
큰일날뻔했다..
'TIL' 카테고리의 다른 글
| TIL 2022-01-13 CSS in JS, ParserOptions.project error (0) | 2022.01.13 |
|---|---|
| TIL 2022-01-12 webpack-hot-middleware, webpack-dev-middleware, FFMPEG.WASM (0) | 2022.01.12 |
| TIL 2022-01-10 React18, startTransition (0) | 2022.01.10 |
| TIL 2022-01-08 Typescript nested Extends, non-null Assertion, Nullish Coalescing Operator ?? (0) | 2022.01.08 |
| TIL 2022-01-07 MySQL Case Sensitivity, OAuth, OAuth2.0 (0) | 2022.01.07 |
