From db465ce0aab1add96c1506cba255ce1fc9563065 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 27 Jun 2023 21:51:40 +0200 Subject: [PATCH] Update test-project after Vite doc changes (#8755) --- __fixtures__/test-project/web/package.json | 2 +- __fixtures__/test-project/web/public/README.md | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index 703b93fc9f75..27b28094b135 100644 --- a/__fixtures__/test-project/web/package.json +++ b/__fixtures__/test-project/web/package.json @@ -26,7 +26,7 @@ "postcss": "^8.4.24", "postcss-loader": "^7.3.3", "prettier-plugin-tailwindcss": "^0.3.0", - "storybook": "^7.0.22", + "storybook": "^7.0.24", "tailwindcss": "^3.3.2" } } diff --git a/__fixtures__/test-project/web/public/README.md b/__fixtures__/test-project/web/public/README.md index 6df2fa250b09..618395f02033 100644 --- a/__fixtures__/test-project/web/public/README.md +++ b/__fixtures__/test-project/web/public/README.md @@ -1,5 +1,5 @@ # Static Assets -Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Webpack builds for production). They will also be available during development when you run `yarn rw dev`. +Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`. >Note: files will *not* hot reload while the development server is running. You'll need to manually stop/start to access file changes. ### Example Use @@ -12,14 +12,13 @@ and alt="Logo" /> ``` -Behind the scenes, we are using Webpack's ["copy-webpack-plugin"](https://github.com/webpack-contrib/copy-webpack-plugin). ## Best Practices -Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Webpack, etc. +Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc. -In general, it's best to import files directly into a template, page, or component. This allows Webpack to include that file in the bundle, which ensures Webpack will correctly process and move assets into the distribution folder, providing error checks and correct paths along the way. +In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash. -### Example Asset Import with Webpack +### Example Asset Import with Vite Instead of handling our logo image as a static file per the example above, we can do the following: ``` import React from "react" @@ -33,4 +32,4 @@ function Header() { export default Header ``` -Behind the scenes, we are using Webpack's ["file-loader"](https://webpack.js.org/loaders/file-loader/) and ["url-loader](https://webpack.js.org/loaders/url-loader/) (for files smaller than 10kb). +See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)