Question

所以我必须制作一些静态/营销网站，我想将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/文件夹

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

谢谢！

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

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

1 个答案: