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

【问题标题】：Setup a pure HTML/CSS components project with Webpack使用 Webpack 设置纯 HTML/CSS 组件项目
【发布时间】：2019-04-11 13:42:51
【问题描述】：

我是配置 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

【问题讨论】：

标签： javascript html css webpack webpack-4

【解决方案1】：

为 HTML/SASS/JS 设置 Webpack 项目的方法与设置 React 项目非常相似。如果您使用 Google webpack 4 zero config，您会发现一些非常好的文章，这些文章会为您提供一些分步说明。

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

【讨论】：

感谢 Jose 的回复。我去看看插件。