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

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-插件 2. mini-css-extract-plugin

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

Setup a pure HTML/CSS components project with Webpack

html

javascript

css

webpack

webpack-4

示例结构：