더 똑똑한 webpack을 react와 express 번들로 묶습니다.

Question

반응하는 앱이 있습니다. 익스프레스 서버에서 실행되며 webpack에 번들됩니다. 내 문제는 내가 서버를 재시작 할 때마다 프론트 엔드를 변경하지 않아도 프론트 엔드 번들을 재구성하는 것이 영원히 필요하다는 것입니다.

프런트 엔드 번들과 관련이없는 서버/API 변경시 서버 부분을 다시로드하고 현재 프런트 엔드 번들을 그대로 유지하는 것이 좋습니다.

const compiler = webpack(webpackConfig) 
    const middleware = webpackMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    contentBase: 'src', 
    stats: { 
     colors: true, 
     hash: false, 
     timings: true, 
     chunks: false, 
     chunkModules: false, 
     modules: false 
    } 
    }) 

    app.use(middleware) 
    app.use(webpackHotMiddleware(compiler)) 
    app.get('*', (req, res) => { 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'build/app.html'))) 
    res.end() 
    }) 

이 할 수있는 현명한 방법이 있나요 : 여기

는 DEV 환경에서의 실행 코드를 무엇입니까? 현재 프론트 엔드 번들을 메모리에 남겨두고 서버를 다시로드 할 수 있습니까? 또는 번들을 업데이트해야하는지 여부를 감지하고 업데이트 할 필요가없는 경우 프로세스를 건너 뛸 수 있습니까?

모든 도움말, 조언 및 제안을 환영합니다! 다른 정보가 필요한 경우 알려주십시오. 감사!

Answer 1

Chokidar 솔루션은보고 변경을위한 훌륭한 라이브러리 사용할 때 Chokidar 여전히 않습니다 chokidar

는 Node.js를 핵심 FS 모듈에 의존하지만,

웹팩-DEV-도구를 사용하는 경우입니다 fs.watch 및 fs.watchFile을보고, 파일 통계 및/또는 dir 콘텐츠를 가져 와서 진실을 확인하기 위해 이받는 이벤트를 정규화합니다.

다음은 chokidar를 사용하여 targetfolder 만 보는 작은 예제입니다. 특정 폴더 만 타겟팅하면 프론트 엔드를 그대로 둘 수 있습니다. 나는 당신의 특정한 유스 케이스를 위해 이것을 시도하지 않았지만 처음에는 이것이 당신의 요구에 맞을 것 같다.

var production = process.env.NODE_ENV === 'production' 
if(!production) { 
    var chokidar = require('chokidar') 
    var watcher = chokidar.watch('./targetfolder') 
    watcher.on('ready', function() { 
    watcher.on('all', function() { 
     console.log("Clearing /targetfolder/ module cache from server") 
     Object.keys(require.cache).forEach(function(id) { 
     if (/[\/\\]targetfolder[\/\\]/.test(id)) delete require.cache[id] 
     }) 
    }) 
    }) 
} 

는 Ultimate Hot Reloading Example

NB라는 Github에서의 좋은 예는,있다 : 디스크에 파일을 기록하지 않습니다 웹팩-DEV-서버, 그것은 메모리의 결과를 제공 익스프레스 인스턴스를 구유. 그러나 webpack --watch는 디스크에 파일을 씁니다.

플래그 솔루션

당신은 웹팩의 --watch 플래그를 사용할 수 있습니다.

서버를 시작하는 스크립트 블록 (또는 webpack을 실행하는 스크립트 블록)에 webpack --progress --colors --watch을 추가하십시오.

이 Webpack documentation를 참조하십시오, 그것은 말한다 :

우리는 수동으로 모든 변경 한 후 다시 컴파일하지 않으 ...

시계 모드를 사용하여, 웹팩은에 사용 된 모든 파일에 대한 파일 전문가를 설치합니다 컴파일 과정. 변경 사항이 감지되면 컴파일이 다시 실행됩니다. 캐싱이 활성화되면 webpack은 각 모듈을 메모리에 유지하고 변경되지 않은 경우 다시 사용합니다.package.json에

예 :

"scripts": { 
    "dev": "webpack --progress --colors --watch" 
} 

Answer 2

난 내가 빠른 속도로 내 번들을 다시 할 수 있지만, 그 반드시 실제 내부의 서버보기를하지 것 SpringBoot 응용 프로그램에서이 문제가 폴더에 저장하고 실시간으로 찾을 수 있습니다. 그래서 정말로해야 할 일은 WAR/JAR에서 파일을 가져 오는 대신 bundle.js 파일을 로컬 폴더에서 항상 찾도록 서버를 구성하는 방법입니다. "웹팩 문제"가 아닙니다. 폴더의 bundle.js에서 서버를 직접 읽는 방법에 대한 문제입니다. 나는 당신에게 그것을하기위한 봄의 방법을 줄 것이다. 그러나 그것은 당신의 건축이 아니다.