https://github.com/mizok/webpack-playground-template

Build a playground project immediately !
https://github.com/mizok/webpack-playground-template

boilerplate-template ejs webpack5

Last synced: 6 days ago
JSON representation

Build a playground project immediately !

• Host: GitHub
• URL: https://github.com/mizok/webpack-playground-template
• Owner: mizok
• Created: 2022-04-03T10:23:02.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T14:01:20.000Z (over 2 years ago)
• Last Synced: 2024-11-02T00:42:02.002Z (about 2 months ago)
• Topics: boilerplate-template, ejs, webpack5
• Language: SCSS
• Homepage: https://mizok.github.io/webpack-playground-template/
• Size: 114 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
---

title: webpack-playground-template

date: 

author: Mizok

version: 0.9.1

tags: 

---

## Introduction

A webpack boilerplate for playground exmaple showcase that uses `ejs` as the template engine.

[Check The Demo Here :D](https://mizok.github.io/webpack-playground-template/)

## Installation And Uasge

- Run `npm install` or `npm i` first to install all dependencies.

- Run `npm run dev` to start the dev-server.

### Where to put my playground examples entry `ejs` files?

You have to put your examples entry `ejs` files in `./src/examples/{YOUR_EXAMPLE_NAME}`, and you must name it `index.ejs`, so the full path will be `./src/examples/{YOUR_EXAMPLE_NAME}/index.ejs`.

### I would like to make some `ejs` files sharable as templates(ex:header.ejs)，how can I make this?

- You have to put your template `ejs` files in `./src/template`.

- In your `ejs` file which you want to insert your template:

```html

<%- include(`{YOUR_TEMPLATE_PATH(RELATIVE)}`) %>

```

for more detail, please check links below:

- https://github.com/dc7290/template-ejs-loader  

- https://ejs.bootcss.com/  

### What kind of files do I need to create a new example?

first you have to create a folder under `src/examples` for your new example.

then you will have to add these files into the new folder:

- an `index.ejs`

- an `index.ts` or add a `ts` folder then add an `index.ts` inside it. (Optional)

- an `main.scss` or add a `scss` folder then add an `main.scss` inside it. (Optional)

### I want to get webpack `mode` environment argument in `ejs` file, how can I make this?

Like this (in your `ejs` file) :

```ejs

<%= mode%>
 

```


### My `img` tag is not showing because `webpack` seems to get my `src` wrong.

Check if you are using `alias` path , but not relative path, like below:

```html



```