webpack middleware
2020. 1. 14. 16:00ㆍwebpack
webpack middleware
webpack middleware는 이미 존재하는 서버에 webpack에서 컴파일한 파일을 전달해준다.
얘도 devServer처럼 메모리에서 bundling된 파일을 이용해서 실제로 file 구조상에서 확인하기 어렵다.
실습하기
1. 설정 및 필요한 라이브러리 설치
yarn init
yarn add webpack
yarn add --dev express webpack-dev-middleware2. index.html, server.js
index.html
<html>
<head>
<title>Webpack Dev Middleware</title>
</head>
<body>
<div class="container">
hello
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
server.js
const express = require("express");
const app = express();
// 현 폴더를 working 폴더로 지정
//자동으로 index.html을 찾아 실행한다.
app.use(express.static(__dirname));
app.get("/", function(req, res) {});
app.listen(3000);
console.log("Server running on port 3000");node server라는 명령어로 실행할 수 있다. http://localhost:3000으로 접속하면 아래와 같은 사진을 볼 수 있다.
3. app/index.js
var ele = document.getElementsByClassName("container")[0];
ele.innerText = "Webpack loaded!!!!!!!!";
4. webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./app/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "http://localhost:3000/dist"
}
};
5. server.js 수정
app.use()미들웨어 함수에 webpackDevMiddleware를 등록해준다. webpack의 정보가 들어있는 compiler와 publicPath, stats의 입력 받는다. stats는 실행과정에서 결과에 따라서 다른색을 보여주며 배포용에도 맞게 하기위해 publicPath를 localhost주소로 지정해준다.
const express = require("express");
const app = express();
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config");
const compiler = webpack(webpackConfig);
app.use(
webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: { colors: true }
})
);
app.use(express.static(__dirname));
app.get("/", function(req, res) {});
app.listen(3000);
console.log("Server running on port 3000");
yarn start 및 npm start로 실행
아래와 같이 실행되며
실행결과
index.js의 코드를 수정하면 자동으로 다시 compile이 되고 웹페이지에 새로고침을 하면 바뀐 모습을 확인할 수 있다.
'webpack' 카테고리의 다른 글
| webpack - devServer (0) | 2020.01.14 |
|---|---|
| webpack resolve (0) | 2020.01.11 |
| webpack plugin (0) | 2020.01.11 |
| webpack loader (0) | 2020.01.11 |
| webpack entry와 ouput (0) | 2020.01.11 |