Youtube Clone Coding (8. webpack)
Webpack은 node.js에서 babel과 같은 역할을 한다.
-
webpack, webpack-cli devDependencies 로 설치
- npm i webpack webpack-cli -D
-
src에 client/js/main.js파일 만들기.
- 나중에 main.js에 쓴 코드들이 우리가 처리하고자 하는 코드들임.
-
webpack.config.js파일 만들기
- webpack.confing.js 내용
-
webpack.config.js에 들어가는 코드들은 옛날 문법으로 써줘야함.
-
entry: 우리가 처리하고자 하는 파일의 경로
-
mode: 개발단계이면 development 완성단계이면 production
-
output: 결과물
-
filename: 이 프로퍼티에 우리 결과물이 될 파일 이름 입력
-
path: 이 프로퍼티에 우리 결과물 파일을 어디에 저장할 지 지정 (이 경로는 절대경로(전체경로)여야함!)
-
rules: 우리가 각각의 파일 종류에 따라 어떤 전환을 할 건지 결정하는 것
- 여러개의 rules가 있을 수 있으니 배열로 만들어 준다.
- test: 어떤 파일을 변환시킬 건지 (이 강이에서는 모든 js파일을 변환시킨다는 코드임)
- use: 어떤 loader을 통해서 변환 시킬 건지 (이강의에서는 babel-loader을 사용)
- babel-loader을 사용하기 위해서 npm i babel-loader을 해 주어야함.
- 정리: babel-loader을 이용해서 js파일들을 변경한다는 것임.const path = require("path"); module.exports = { entry: "./src/client/js/main.js", mode: "development", output: { filename: "main.js", path: path.resolve(__dirname, "assets", "js"), }, module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader", options: { presets: [["@babel/preset-env", { targets: "defaults" }]], }, }, }, ], }, };
-
- webpack.confing.js 내용
-
브라우저에서 assets파일을 읽을 수 있게 처리해주기
- 서버는 모든 파일을 브라우저에게 공개 하지 않기때문에 따로 설정을 해 주어야한다.
- app.use("/static", express.static("assets"));
- 유저가 /static으로 갈때 assets파일을 보여 준다는 뜻
-
pug에 script써주기
- script(src="/static/js/main.js")
-
webpack.config.js 실행시키기
- package.json파일에 코드적어주기
-
밑의 코드로 인해 npm run assets하면 webpack을 실행 시킬 수 있다.
-
실행시키면 assets/js/main.js파일이 만들어짐 → 우리가 쓴 코드들을 변환시킨 코드가 들어가짐
"assets": "webpack --config webpack.config.js"
-
- package.json파일에 코드적어주기
-
scss를 css로 변환 시키기
- npm i sass sass-loader css-loader style-loader
- client/scss/styles.scss만들기 → css로 만들 파일
- main.js에 styles.scss import하기
- rules에 scss관련 loader설정하기
-
loader은 적힌 반대 순서대로 실행됨.
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"], },
-
- npm run assets 실행 시키기
-
MiniCssExtractPlugin을 사용해서 js와 css파일 분리하기
- npm install --save-dev mini-css-extract-plugin
- 밑의 코드로인해 js와 css파일이 서로 분리된다.
- main.js는 assets/js/main.js에 저장됨
- sass는 assets/css/styles.css에 저장됨
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = { entry: "./src/client/js/main.js", mode: "development", plugins: [ new MiniCssExtractPlugin({ filename: "css/styles.css", }), ], output: { filename: "js/main.js", path: path.resolve(__dirname, "assets"), }, module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader", options: { presets: [["@babel/preset-env", { targets: "defaults" }]], }, }, }, { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, ], }, };
- pug에 css연결하기
- link(rel="stylesheet", href="/static/css/styles.css")
-
webpack을 돌릴려면 계속 npm run assets해야하는 수고를 더는법
- webpack.config,js에 다음과 같은 설정을 해준다.
-
watch: true → 초기 빌드 후 webpack은 해결된 파일의 변경 사항을 계속 감시한다.
-
clean: true →빌드에서 생성된 파일만 표시되고 더 이상 이전 파일은 표시되지 않는다.
module.exports = { entry: "./src/client/js/main.js", mode: "development", watch: true, plugins: [ new MiniCssExtractPlugin({ filename: "css/styles.css", }), ], output: { filename: "js/main.js", path: path.resolve(__dirname, "assets"), clean: true, },
-
- webpack.config,js에 다음과 같은 설정을 해준다.
-
webpack과 관련된 파일을 저장할때 서버를 재시동하는 것을 방지하는 법
- nodemon.json파일 만들기
- nodemon.json파일에 코드
-
ignore → ignore에 설정한 파일들은 무시한다는뜻
-
exec → 감지되었을 때 수행할 명령
{ "ignore": ["webpack.config.js", "src/client/*", "assets/*"], "exec": "babel-node src/init.js" }
-
- nodemon.json파일에 코드
- package.json
-
nodemon/webpack 둘다 실행될때 해당json파일을 찾아서 실행시키므로 다음과 같이 간략하게 표현 할 수 있다.
"scripts": { "dev:server": "nodemon", "dev:assets": "webpack" },
-
- nodemon.json파일 만들기
Author And Source
이 문제에 관하여(Youtube Clone Coding (8. webpack)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@abc5259/Youtube-Clone-Coding-8.-webpack저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)