정적/마케팅 사이트 (비 SPA)가 포함 된 Webpack

정적/마케팅 사이트 몇 개를 만들어야하고 webpack을 모듈 bundler로 사용하고 싶습니다. 정적/마케팅 사이트 (비 SPA)가 포함 된 Webpack

그래서 나는이 같은 디렉토리 구조에 대해 생각되었다 :

build/ 
src/ 
    html/ 
    index.html 
    foo.html 
    bar.html 
    scss/ 
    main.scss 
    _partial1.scss 
    js/ 
    app.js 
    foo.js 
    fonts/ 
    fonta.ttf 
    images/ 
    img1.png 
    svg1.svg

내가 기본적으로 모든 HTML 원하는 것은 내가 https://github.com/kevlened/copy-webpack-plugin를 사용하는 생각을했다 그래서이

<html> 
    <head> 
    <link href="bundle.css" /> 
    </head> 
    <body> 
    <!-- html static content --> 
    <script src="bundle.js" /> 
    </body> 
</html>

뭔가를하는 것입니다 그래서 src/html 안에있는 파일을 build으로 복사하고 /build에 css/js를 빌드하여 다음 파일 구조로 끝낼 수 있습니다 :

build/ 
    index.html 
    about.html 
    foo.html 
    bar.html 
    build.js 
    build.css

또한 https://github.com/tapio/live-server을 사용하여 모든 것을 처리하려고 생각했습니다. 내부는 build/입니다.

말했다되고 그건, 내가 어떤 .scss/.js/.html에 만들어진 모든 변경이 방법에 build/ 폴더에

생각을 복사됩니다? 정적/마케팅 사이트를 게재하는 것이 좋습니다.

감사합니다. 당신이 그 폴더 구조에 결합하지 않는 경우

출처

2017-01-29 Alejandro Nanez

, 나는 또 다른을 사용합니다 :

build/ 
html/ 
    index.html 
    foo.html 
    bar.html 
src/ 
    scss/ 
     main.scss 
     _partial1.scss 
    js/ 
     app.js 
     foo.js 
    fonts/ 
     fonta.ttf 
    images/ 
     img1.png 
     svg1.svg

그리고 당신의 HTML 파일의

당신이 간단하게 작성할 수 있습니다

<html> 
    <head> 
     <link href="bundle/main.css" /> 
    </head> 
    <body> 
     <!-- html static content --> 
     <script src="bundle/app.js" /> 
    </body> 
</html>

그래서 당신은 단지 필요 번들 된 JS 및 CSS 파일을 build에 생성하고 webpack으로 번들 할 때마다 HTML 파일을 복사 할 필요가 없습니다.

출처

2017-01-29 00:48:07 NonPolynomial

흠 나는 내 코드를 추가하기 위해'src /'와 다른 다른 폴더를 가지고 있다는 사실을 싫어한다. 'src/html'에서 html을'build'에 붙여 넣기 만하면 어떤 이점도 보이지 않기 때문에 HTML을'build /'폴더 안에 옮기는 아이디어를 좋아합니다. –

그러나 HTML 파일이 정적 인 경우 html을'src'에서'build' 폴더로 복사하지 않아도됩니다. – NonPolynomial

정적/마케팅 사이트 (비 SPA)가 포함 된 Webpack

답변

관련 문제