README

安装

此主题可以通过Composer安装，只需将以下行添加到您的项目composer.json文件中。

require: "andrewhaine/silverstripe-webpack-theme": "~2.0"

如果您使用Composer安装，建议在初始安装后从composer.json文件中删除上述选项，以避免安装重复的主题或覆盖您的更改。

将此主题复制到您的主题文件夹的子目录中。

此主题旨在通过压缩资源和优化图像来优化您的生产构建。在index.js中引用的任何资源（显式或隐式）都将进行编译。

此主题支持SCSS和Sass语法。

所有CSS的推荐入口点是sass/style.sass，任何导入的文件都将打包成一个CSS文件，您可以按自己的方式包含它（Requirements API、link标签等）。

设置还会生成一个editor.css文件，SilverStripe使用它来设置CMS中TinyMCE字段的样式，导入到sass/editor.sass中的样式将被包含在这个文件中。

SCSS和Sass文件可以使用stylelint进行代码风格检查，代码风格检查器的规则可以在.stylelintrc.yml中更新。完整规则列表可以在此处找到。

JavaScript的包含方式与CSS类似，此主题中JavaScript的入口点是javascript/src/main.js。

此主题默认使用ES6语法进行开发，但可以通过安装babel预设并更改.stylelintrc.yml中的设置相应地调整。

将导入到bundle中的任何图像，无论是直接导入还是通过URL引用，都将进行优化。尽可能使用Data URI内联文件，如果图像大小超过10kb，则将使用image-webpack-loader进行压缩并将其放置在images目录中（保留名称和扩展名）。图像需要放置在'images'目录中。

默认情况下，出于性能考虑禁用了图像压缩 - 当生产环境需要将图像打包时，可以通过在webpack.common.babel.js中的disable选项中重新启用。

为了使用监视任务，您需要告诉webpack在创建开发服务器时应代理哪个URL - 这是您用于项目的开发URL。此选项可以在variables.js中设置。

构建系统使用webpack开发服务器，这允许快速测试时的热重新加载。要启动服务器，请运行npm run watch。服务器将在端口3000上启动，您还将获得由FormidableLabs提供的漂亮的终端界面。

服务器启动后，您应该会看到当任何资产文件更改时，您的网站将实时更新在localhost:3000上。

一旦开发完成，请使用npm run build提取CSS并压缩bundle。这将创建主CSS文件（css/main.css）和您的JS捆绑包（javascript/dist/main.bundle.js），然后可以将其包含在模板中。

系统提供了在CSS和JS文件顶部添加签名的功能，可以编辑显示的信息或禁用此功能，请在variables.js中编辑选项。