Understanding and Practice of Frontend Development Environment (webpack, babel, eslint..)

https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json

When using copy-webpack-plugin, you may encounter problems with the webpack build.

cause

Backwards incompatibility due to major update of copy-webpack-plugin

The signature of the existing constructor function has changed.

- Existing: CopyPlugin(patterns, options)

- Change: CopyPlugin({ patterns, options })

Solution

// 기존: new CopyPlugin([ { from: "./node_modules/axios/dist/axios.min.js", to: "./axios.min.js", // 목적지 파일에 들어간다 }, ]), // 변경 (이렇게 변경하세요) new CopyPlugin({ patterns: [ // patterns 키를 추가합니다. { from: "./node_modules/axios/dist/axios.min.js", to: "./axios.min.js", // 목적지 파일에 들어간다 }, ] }),

Following the webpack development server, this article introduces webpack-dev-middleware.

• "If the webpack development server is not enough, try using webpack-dev-middleware" - Kim Jeong-hwan's blog

This middleware is also used internally in the webpack development server. It is a package used when customizing the development server further.

https://youtu.be/_QCNqV_EfzE

I'd like to share some small tips with those who use VSCode.

If you get stuck while studying, please use "Questions" a lot.

1. If there is anything you find difficult to understand due to insufficient explanation of the lecture, please do not hesitate to ask questions.

2. If you encounter any errors or environmental issues while practicing, please upload the entire code along with your question.
If you upload the practice code to GitHub and leave the link in your question, we can answer you much faster.

When uploading the practice code to GitHub, it would be a good idea to also add the settings below.

1. Please upload it to the public GitHub repository.
Settings > Options > Danger Zone > Make this repository public settings

2. Please add me as a collaborator. Depending on the situation, I may need to modify the code and upload it to GitHub.
Settings > Manage Access > Invite a collaborator > Invite my email (ej88ej@gmail.com)