README

(包含 Webpack 5, Tailwind 2, PostCSS 8, 热重载和其他功能)

这是一个 Craft CMS 3 项目的实际模板，利用了 Webpack 5, Tailwind 2, PostCSS 8 和 Twigpack。还包括一个热重载的开发环境。我创建这个作为 Craft CMS 3 / Webpack 5 项目的起点。

该项目最初由 https://github.com/mizziness/craft3-webpack5-tailwind2-boilerplate 创建

包含内容

Craft CMS 3 - 我选择的 CMS，该应用将消耗 Webpack 的资源。
Webpack 5 - 打包、优化和提供您的资源
Twigpack - Craft CMS 和 Webpack 之间的桥梁
TailwindCSS 2 - 优秀的 CSS 框架，使开发变得迅速
SASS - SASS/SCSS 支持
PostCSS - 后处理 CSS 文件

其他包含的工具/插件

Webpack

webpack - 模块和资源打包器。
webpack-cli - Webpack 的命令行界面
webpack-dev-server - Webpack 的开发服务器
webpack-merge - 简化开发/生产配置
cross-env - 跨平台配置

转译

@babel/core - 将 ES6+ 转译为向后兼容的 JavaScript
@babel/plugin-proposal-class-properties - 在类上直接使用属性（一个 Babel 配置示例）
@babel/preset-env - Babel 的智能默认值
babel-loader - 使用 Babel 和 Webpack 转译文件

加载器、Sass、插件

sass-loader - 加载 SCSS 并编译为 CSS
sass - Dart Sass
fibers - 提高 Dart Sass 性能（参见此处说明）
postcss-loader - 使用 PostCSS 处理 CSS
postcss-preset-env - PostCSS 的合理默认值
css-loader - 解析 CSS 导入
style-loader - 将 CSS 注入 DOM
clean-webpack-plugin - 删除/清理构建文件夹
webpack-manifest-plugin - 创建包含块段的 Manifest.json 文件
html-webpack-plugin - 从模板生成 HTML 文件
mini-css-extract-plugin - 将 CSS 提取到单独的文件
css-minimizer-webpack-plugin - 优化并最小化 CSS 资产

开始使用

首先，完成 Craft CMS 在本地开发环境中的安装

$ composer install
$ ./craft setup

然后安装我们的其他包并运行 HMR 开发服务器

$ yarn install
$ yarn dev

（我在我的项目中使用 yarn，但您不必这样做 - 使用您选择的工具。）

Webpack 资源默认设置为从 localhost:8080 提供。

您可以通过使用 Twigpack 的功能将您的块段/哈希资源包含在 Craft CMS 模板中

{{ craft.twigpack.includeCssModule("app.css", true) }}
{{ craft.twigpack.includeJsModule("app.js", true, {"type": "module"}) }}
{{ craft.twigpack.includeJsModule("chunk-vendors.js", true) }}

脚本

正如您在 package.json 文件中所见，为了方便起见，包含 3 个脚本

yarn dev - 运行 HMR 开发服务器
yarn build - 创建用于部署的生产就绪构建（资产输出在 web/dist）
yarn clean - 在编码时快速清除 Craft CMS 缓存

个性化定制

该项目出厂时已预配置，可配合 Craft CMS 模板使用，但有许多方法可以自定义其工作方式以适应您的需求。它试图不对您的工具包做任何假设，只要求最小的配置以配合包含的工具工作。

Tailwind 已设置为默认配置，我强烈建议您为您的项目进行修改。（如果您有一个现有的 tailwind.config.js 文件，可以覆盖它以快速导入所有自定义样式。）
devServer 选项可以根据需要进行更改和扩展 - 例如，默认情况下，自动打开服务的 URL 是关闭的，但如果您使用自定义生成的模板，则可能希望打开它。
尽情发挥！

美观的 Webpack

如果您像我一样喜欢更干净的 webpack 报告，请尝试这个

yarn add webpackbar -D

在 wpconfig 文件中，您将看到两条被注释的行，您可以取消注释以使用 webpackbar 启用更美观的 webpack 报告视图。

灵感来源

并以起点使用：https://github.com/taniarascia/webpack-boilerplate

许可证

该项目是开源的，并可在 MIT 许可证下使用。

frischkraft / craft3-webpack5-tailwind2

维护者

详细信息