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

A webpack5 boilerplate that uses ejs as the template engine.
https://github.com/mizok/webpack-template

boilerplate-template ejs webpack5

Last synced: about 2 months ago
JSON representation

A webpack5 boilerplate that uses ejs as the template engine.

• Host: GitHub
• URL: https://github.com/mizok/webpack-template
• Owner: mizok
• Created: 2021-06-09T16:03:36.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-05-09T06:24:26.000Z (over 1 year ago)
• Last Synced: 2024-10-11T00:58:08.031Z (3 months ago)
• Topics: boilerplate-template, ejs, webpack5
• Language: SCSS
• Homepage:
• Size: 3.33 MB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
---

title: webpack-template

date: 

author: Mizok

version: 0.9.1

tags: 

---

## Introduction

A webpack boilerplate that uses `ejs` as the template engine.

## 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 entry `ejs` files?

You have to put your entry `ejs` files in `./src/pages`.

### 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('./src/template/header.ejs') %>

```

for more detail, please check links below:

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

- https://ejs.bootcss.com/  

### How to connect `ejs` file with entry `ts` file/ entry `scss` file?

Here we are actually talking about `webpack` entry chunks.

When designing this boilerplate, we tried to make chunk setting easy.

By Default, if you want your output page name to be `index.html`, and you are not going to use a specfic entry chunk, you will need:

- an `index.ejs` file in `./src/pages`  

- an `index.ts` file in `./src/ts`

- an `index.scss` file in `./src/scss`

On the other hand, if you want your output page name to be `index.html`,and using a chunk named `main`, then you will need:

- an `index.main.ejs` file in `./src/pages`  

- a `main.ts` file in `./src/ts`

- a `main.scss` file in `./src/scss`

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

Like this (in your `ejs` file) :

```ejs

<%= mode%>
  

```


And this (in your `js` file) :

```javascript

console.log(PROCESS.MODE) // this will output development|production

```

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

You have to use `alias` path , not relative path(like below):

```html



```