webpack dev server로 html 파일에 javascript 진입 점 삽입?

CSS가 인라인으로 삽입 된 것처럼 JS 엔트리 포인트를 webpack dev 서버에 삽입 할 수 있습니까?webpack dev server로 html 파일에 javascript 진입 점 삽입?

예를 들어, 내 index.html을은 다음과 같습니다

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>app</title> 
</head> 
<body> 
    <div id="app"></div> 
</body> 
</html>

하지만 제가보고 싶은 것은 내 웹팩 dev에 서버를 실행 한 후,이다,이 같은합니다 (CSS는 I 있지만, 자동으로 주입되고 있습니다 js 참조가 표시되지 않음) :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>app</title> 
    <style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style> 
</head> 
<body> 
    <div id="app"></div> 
    <script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script> 
</body> 
</html>

가능합니까?

출처

2016-07-17 bitten

예, 가능합니다. 당신은 사용해야합니다 HTML Webpack Plugin

플러그인은 스크립트 태그를 사용하여 본문에있는 모든 webpack 번들을 포함하는 HTML5 파일을 생성합니다. 다음과 같이 그냥 웹팩 설정에 플러그인을 추가

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var webpackConfig = { 
    entry: 'index.js', 
    output: { 
    path: 'dist', 
    filename: 'index_bundle.js' 
    }, 
    plugins: [new HtmlWebpackPlugin()] 
};

여기에는 다음이 포함 된 파일 DIST/index.html을 생성합니다 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Webpack App</title> 
    </head> 
    <body> 
    <script src="index_bundle.js"></script> 
    </body> 
</html>

출처

2016-07-17 11:34:10

좋아요, 이것은 내가 필요 정확히이다. 나는 내부에 '

'이 필요했기 때문에 템플릿을 사용하는 것으로 끝났다. 감사! – bitten

webpack dev server로 html 파일에 javascript 진입 점 삽입?

답변

관련 문제