1.npm install webpack --save npm
2.install express webpack-dev-middleware --save-dev, npm i ejs --save all ejs
3.npm init -y 실행 후 package.json 생성 된지 확인
4.index.html 생성 후 해당 샘플 코드 삽입
<html>
<head>
<title>Webpack Dev Middleware</title>
</head>
<body>
<div class="container">
hello
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
5.server.js 파일 생성 후 해당 내용 삽입
var express = require('express'); //라이브러리를 들고 온다.
var app = express(); //express() app 넣어준다.
var path = require('path');
app.use(express.static(__dirname)); //express 설정 할수 있도록 초기 설정
// view engine setup
// __dirname : root folder
app.set('views', path.join(__dirname));
app.set('view engine', 'ejs'); //ejs 는 js에 html 를 사용 할수있 해준다.
app.engine('html', require('ejs').renderFile); //html 파일을 인식 하게 해준다.
app.get('/', function (req, res) {
res.send('index');
});
app.listen(3000);
console.log("Server running on port 3000");
6.node server.js 실행 후 localhost:3000 웹페이지를 띄워서 내용 확인
7.app/index.js 파일 생성후 아래 코드 삽입
var ele = document.getElementsByClassName('container')[0];
ele.innerText = "Webpack loaded!!";8. webpack.config.js 파일 생성 후 아래 코드 삽입
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3000/dist'
},
};9. server.js 파일 맨 위에 해당 코드 삽입
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config"); //상대 경로
var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, { //compiler 웹팩이 미들웨어 api호출
publicPath: webpackConfig.output.publicPath, //
stats: {colors: true} //로그값에 색깔이 입히는 옵션
lazy : true //웹페이지 로드시 webpack 동작 하도록 하는 옵션
}));10.node server.js 재 실행
부록)
webpack-dev-middleware 관련 옵션
링크 : https://github.com/webpack/webpack-dev-middleware
'webpack' 카테고리의 다른 글
| webpack 유용한 링크 모음 (0) | 2019.08.27 |
|---|---|
| webpack-simple webpack.config.js 코드 간략한 설명 (0) | 2019.08.27 |
| webpack 자주 사용 하는 명령어 모음 (0) | 2019.08.27 |
| Webpack Dev Server Setting (0) | 2019.08.26 |
| webpack 설치 & 기본 명령어 정리 (0) | 2019.08.26 |
foglove
개인적으로 공부 하면서 이해가 안가는것들 정리 하거나 책을 보면서 정리 해보는 습관을 가지고 시작한 블로그 입니다.