webpack

Webpack Dev Middleware 사용하기

foglove 2019. 8. 27. 14:00

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