2016-11-01 2 views
0

매우 간단한 웹팩 설정이 있는데 자동으로 다시로드하려고합니다. 일을 단순하게 유지하기 위해 프로젝트의 루트 디렉토리에 모든 파일이 있습니다.webpack-dev-server 인라인 플래그가 작동하지 않습니다.

index.html :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Webpack</title> 
    </head> 
    <body>hello</body> 
    <script src="app.js"></script> 
</html> 

webpack.config.js :

module.exports = { 
    context: __dirname, 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html", 
    }, 
    output: { 
    filename: "bundle.js" 
    }, 
    watch: true, 
    module: { 
    loaders: [ 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
    ], 
    }, 
} 

app.js는 :

console.log("hello everyone!"); 

웹팩 실행하려면, 내가 실행 :

$ ./node_modules/.bin/webpack-dev-server --inline 

파일을 변경하면 webpack-dev-server가 제대로 작동하는지 다시 볼 수 있습니다. 그러나 새로운 내용을 업데이트하려면 전체 페이지를 새로 고쳐야합니다. --inline 옵션을 사용할 때 그렇게 할 필요가 없다고 생각했습니다.

<script src="http://localhost:8080/webpack-dev-server.js"></script> 

후 자동으로 다시로드가 잘 작동 :

나는 내 HTML로 행 다음에 추가하면 것을 알아 냈다. 그 자체가

  • inline 그 처리해야 HTML을 수정하지의 REPO에 들어가 안

    • :하지만 HTML은 becuase,이 라인을 포함하지한다. CLI param 또는 webpack.config.js 파일의 속성. 나는 둘 다 사용하지도 작동하지도 않는다.

    나는 왜 inline 것이 작동하지 않는지 알 수 없습니다.

  • 답변

    -1

    Webpack Dev Server 인라인 모드는 publicPath에 따라 다릅니다. webpack.conf에 publicPath를 추가하고 js 파일의 주소를 <script src="assets/app.js"></script>과 같이 지정할 수 있습니다. 그러면 인라인 모드가 작동합니다.

    +0

    필자는 문서에서'publicPath'에 대해 알고 있지만 여전히 정의 할 부분을 모른다. 그래서 SO는 질문과 답변에 관한 예제 기반입니다. 당신의 대답은 저에게 도움이되지 않습니다. 그것은 논평일지도 모르지만, 대답은있는 그대로입니다. – ducin

    관련 문제