Webpack 2번째
*지난 포스팅 내용의 복습과 정리가 포함되어 있습니다
1. Webpack
npm init -y
npm install webpack webpack-cli react react-dom먼저 웹팩과 리액트를 설치합니다
[./src/index.jsx]
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./app.jsx"
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(React.createElement(App))[./src/app.jsx]
// 구조분해 할당으로 컴포넌트만 불러올 수도 있습니다
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
React.createElement("div", null, "hello world")
)
}
}we
export default App;기본 설정은 끝.
다음으로 웹팩 환결설정이 필요합니다
루트 디렉토리에 webpack.config.js 파일을 생성합니다
[webpack.config.js]
// 어떤 모듈(ES6, CommonJS)을 사용중인지 구분할 수 있어야 합니다
const path = require("path");
module.exports = {
// 웹팩의 이름과 모드를 지정합니다
name: "react-project",
mode: "development", // development or production
resolve: {
// 어떤 파일을 번들링할 것인지 지정합니다
extensions: [".js", ".jsx"],
},
entry: "/src/index.jsx",
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
};npx webpack번들링 결과 dist 디렉토리 안에 bundle.js 파일이 생성됩니다
2. HtmlTemplate
먼저 관련 플러그인을 설치하겠습니다
npm install html-webpack-plugin다음으로 환경설정을 수정합니다
[webpack.config.js]
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
// 웹팩의 이름과 모드를 지정합니다
name: "react-project",
mode: "development", // development or production
resolve: {
// 어떤 파일을 번들링할 것인지 지정합니다
extensions: [".js", ".jsx"],
},
entry: "./src/index.jsx",
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 원본 파일
filename: 'index.html', // 번들링 될 파일이름
}),
],
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
};npx webpack 결과 dist 디렉토리 안에 index.html 파일이 생성됩니다
[./dist/index.html]
<script defer src="bundle.js"></script>3. Babel
관련 패키지를 설치합니다
// babel-loader는 웹팩이 바벨을 실행시켜줄 수 있게 만들어줍니다
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader역시 환경설정 수정이 필요합니다
[webpack.config.js]
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
// 웹팩의 이름과 모드를 지정합니다
name: "react-project",
mode: "development", // development or production
resolve: {
// 어떤 파일을 번들링할 것인지 지정합니다
extensions: [".js", ".jsx"],
},
entry: "./src/index.jsx",
plugins: [
// HtmlTemplate
new HtmlWebpackPlugin({
template: 'index.html', // 원본
filename: 'index.html', // 번들링 될 파일이름
}),
],
// 바벨 관련 설정
module: {
rules: [
{
test: /\.jsx?/,
loader: "babel-loader",
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [],
}
}
],
},
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
};
아까와 같은 과정을 거치고 나면
이제는 노드 환경에서 리액트 코드를 작성할 때에도 JSX 문법을 사용할 수 있게 됩니다
// React.createElement("div", null, "Hello World")
<div>Hello World</div>
// root.render(React.createElement(App))
root.render(<App />)4. hot reloading ~ devServer
serve라는 이름으로 서버 파일이 담길 디렉토리를 생성하겠습니다
npm install expressserver.js 파일 생성 + 기본 세팅
[server.js]
const express = require("express");
const app = express();
const path = require("path");
// 정적파일 연결은 dist 디렉토리를 바라보도록 합니다(bundle.js)
app.use(express.static(path.join(__dirname, "..", "dist")));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "..", "dist/index.html"))
});
app.listen(3000, () => {
console.log("listening on port 3000");
});그런데 파일을 수정할 때마다 매번 서버를 끄고, 번들링을 다시하는 것은 너무 번거로워요
devServer 설정을 통해 핫로딩 기능을 활성화하면 이 과정을 자동화할 수 있습니다
먼저 관련 패키지를 설치하겠습니다
npm install webpack-dev-server그리고 다시 한 번 환경설정 수정이 필요합니다
[webpack.config.js]
아래 코드를 컨피그 파일에 삽입합니다
devServer: {
static: {
directory:path.join(__dirname, "dist"),
},
compress: true,
port: 3000,
hot: true,
historyApiFallback: true, // 새로고침을 허용하겠다는 뜻입니다
}또 이번에는 package.json 파일도 약간의 수정이 필요합니다
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 아래 코드를 추가합니다
"start": "webpack serve --open --hot"
},실행은 npm run start
이것으로 번들링 & 서버 재실행도 자동화가 가능해졌습니다!
웹팩 2편 마침.
