带有静态/营销网站（非 SPA）的 Webpack答案

【问题标题】：Webpack with static/marketing sites (non SPA)带有静态/营销网站（非 SPA）的 Webpack
【发布时间】：2017-06-14 11:06:55
【问题描述】：

所以我必须制作几个静态/营销网站，并且我想使用 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 都有这样的东西

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

所以我想使用https://github.com/kevlened/copy-webpack-plugin，这样我就可以将src/html 中的文件复制到build 中，并将css/js 构建到/build 中，最终得到如下文件结构：

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

我还在考虑使用https://github.com/tapio/live-server 来提供build/ 内部的所有内容。

话虽如此，我对任何 .scss / .js / .html 所做的每项更改都将复制到 build/ 文件夹中

对这种方法的想法？我认为为静态/营销网站提供服务是可以的。

谢谢！

【问题讨论】：

标签： javascript html css webpack static-site

【解决方案1】：

如果您没有绑定到该文件夹结构，我会使用另一个：

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 文件。

【讨论】：

嗯，我不喜欢有另一个不同于src/ 的文件夹来添加我的代码。我喜欢将 HTML 移动到 build/ 文件夹中的想法，因为我看不到将 html 从 src/html 内部复制粘贴到 build 的任何好处。