[front-end] 환경 로컬 개발
webpack
웹팩 다중 환경 설정
dev와prod에 대한 다른 설정
dev
product
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true
})
]
개발 서버
웹팩에서 세 가지 로컬 개발 방식을 주셨는데 워치 방식은 너무 쉬워요.
webpack-dev-middleware
웹팩-dev-middleware는 내장express 서버인 웹팩-hot-middleware를 중간층 플러그인으로 하여 업데이트 페이지를 핫로드하는 데 사용되며, 웹팩-dev-middleware http-proxy-middle을 기반으로 중간proxy층으로 전송해야 한다.
webpack-dev-middleware
웹 패키지-dev-middleware는 파일을 진짜 하드디스크에 포장하지 않고 메모리에 포장하여 웹 패키지를 통과합니다.config.js는 웹 패키지 파일을 가져와 메모리에 압축합니다
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
// quiet: true, // quite mode won't output compile message in console
})
서버는express로 구현
var express = require('express')
var app = express();
app.use(devMiddleware);
파일 구조가 변할 때 재컴파일을 터치합니다 (watch-mode에서)
compiler.plugin('compilation', function (compilation) {
console.log('compilation');
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// do sth here, mostly hot-middleware
cb();
});
})
원리//TODO 참조는 웹팩-dev-middleware에서 chunkhash를 사용할 수 없으며 웹팩이 필요합니다.config.js에서 서로 다른 환경에 대한 설정
webpack-hot-middleware
hotmiddleware는devmiddleware를 기반으로 서버 프로필에 추가해야 합니다
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
app.use(hotMiddleware)
동시에, 다시 컴파일한 후 hotmiddleware를 통해 전송해야 한다
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
console.log('compilation')
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
마지막으로
webpack.config.dev.js에 두 개의 entry에 있는 app를 추가하여client에 가입해야 한다require('eventsource-polyfill'); // ie event
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true');
hotClient.subscribe(function (event) {
// client ， event ， reload
if (event.action === 'reload') {
window.location.reload();
}
});
plugins 추가
plugins: [
// OccurenceOrderPlugin is needed for webpack 1.x only
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
// Use NoErrorsPlugin for webpack 1.x
new webpack.NoEmitOnErrorsPlugin()
]
http-proxy-middleware
서버 프로필에 프록시 전송층으로 추가
app.use(require('http-proxy-middleware')(
filter,
{
target,
}
));
그 중에서 Filter는 에이전트가 필요한 요청에 대응하고 target은 에이전트가 전달하는 도메인 이름입니다. 예를 들어
app.use(require('http-proxy-middleware')(
'/login',
{
target: 'http://localhost:3000'
}
));
모든 "/login"요청을 localhost:3000으로 전송합니다
좋은 웹페이지 즐겨찾기
