Question

我是配置webpack的新手。我知道它在React，Angular等应用程序框架中使用了很多；但我不需要那些。我被要求设置一个项目，在该项目中，我们将使用纯HTML / CSS（Sass）/ JS创建组件，这些组件随后将放在一起作为模板（纯粹出于设计目的）。基本上类似于React在没有React本身的情况下如何执行其组件。

如何使用webpack和与之配套的插件来设置一个类似于下面结构的项目？

非常感谢

示例结构：

-rootfolder:
    -dist/
    -src/
        -components/
            -progress-bar:
                -progress-bar.html
                -progress-bar.scss
                -progress-bar.js
            -accordion/
                -accordion.html
                -accordion.scss
                -accordion.js
            -alert/
                -alert.html
                -alert.scss
                -alert.js
        -templates/
            -home.html
            -user-profile.html
            -user-dashboard.html

Answer 1

仅针对HTML / SASS / JS设置Webpack项目的方法与设置React项目非常相似。如果您使用Google webpack 4零配置，则会发现一些很好的文章，为您提供了分步说明。

您将需要Webpack 4的以下插件： 1. html-webpack-plugin 2. mini-css-extract-plugin

使用Webpack设置纯HTML / CSS组件项目

示例结构：

1 个答案: