# typeScript and Webpack

**URL:** <https://discourse.processing.org/t/typescript-and-webpack/6700>\
**Category:** p5.js\
**Created:** [December 17, 2018, 12:04pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700 "2018-12-17T12:04:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 17, 2018, 12:04pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/1 "2018-12-17T12:04:10Z")

</div>

I code a little template for typeScript via webPack, my first step but that’s work. So if you’r like me and want type and class your code in javaScript…go it. And no hesitation to improve this newby template !

> **[StanLepunK/P5JS\_typeScript\_webPack](https://github.com/StanLepunK/P5JS_typeScript_webPack)**
>
> Webpack template for P5JS and typeScript. Contribute to StanLepunK/P5JS\_typeScript\_webPack development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [December 21, 2018, 9:53pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/2 "2018-12-21T21:53:12Z")

</div>

I noticed that you uploaded your `node_modules/` directory to your .git repository (which is usually not something you want to do), so I would at least create a file called `.gitignore` with the contents:

```auto
node_modules/
dist/

```

also, I’m not sure if the `dist/index.html` and `dist/style.css` files are generated from somewhere? If you put them there manually, it’s not a good idea to mix template files / content with the autogenerated content (specified with ‘outDir’ in the `tsconfig.json`). Also not sure if you intend to use the react framework in this project as well? (I only ask because I see some `tsx` loader code in the webpack config), so unless you also intend to pull in react & use it I would omit that code as well! (YAGNI! 🙂 )

In fact, I would just say stick with just `Typescript` here (until you need webpack features), and I would just do ‘build tool’ stuff with a simple `cp -R` in an npm script 🙂 (1 less dependency!), or even just have the static files (index.html) refer to `build/export.js`

Also, I just want to link to a nice blog post that I found useful about webpack: [https://blog.andrewray.me/webpack-when-to-use-and-why/](https://blog.andrewray.me/webpack-when-to-use-and-why/)

hope this helps!

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 23, 2018, 9:39pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/3 "2018-12-23T21:39:11Z")

</div>

Thx a lot for the advice, I’m beginner with TypeScript, Webpack and I use Github like a little gnome… So I go fast on your link to became a human real coder.

Thx a lot @julian2

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 23, 2018, 9:44pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/4 "2018-12-23T21:44:49Z")

</div>

@julian2 I don’t find where I can set `gitignore`I remenber when I create the repository I can do, but after is it possible or i must create a new repository and remove the older one ?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 23, 2018, 11:55pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/5 "2018-12-23T23:55:18Z")

</div>

There’s a `Create new file` and other buttons on the left side of the `Clone or download` big green button:

> **[Creating new files - GitHub Docs](https://docs.github.com/en/repositories/working-with-files/managing-files/creating-new-files)**
>
> You can create new files directly on GitHub in any repository you have write access to.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e528033a24cee397882c405a5693ae21245001c9.png)

> [@Upload files that are not images](https://discourse.processing.org/t/upload-files-that-are-not-images/5933/3):
>
> For code w/ data assets, just create a GitHub repo for it: octopus[Help.GitHub.com/articles/create-a-repo/](http://Help.GitHub.com/articles/create-a-repo/) After that, you can drag & drop your code’s root folder into your repo: file_folder[Help.GitHub.com/articles/adding-a-file-to-a-repository/](http://Help.GitHub.com/articles/adding-a-file-to-a-repository/) Here’s a repo example for a sketch containing lotsa data assets: card_file_box

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 24, 2018, 12:12am UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/6 "2018-12-24T00:12:03Z")

</div>

> [@Stanlepunk](#):
>
> I don’t find where I can set “.gitignore”…

> **[gitignore.io](https://www.toptal.com/developers/gitignore)**
>
> Create useful .gitignore files for your project

> <https://gist.github.com/octocat/9257657>

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 24, 2018, 9:51am UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/7 "2018-12-24T09:51:54Z")

</div>

You’re Gold Mine thx !!!

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 24, 2018, 2:06pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700/8 "2018-12-24T14:06:12Z")

</div>

Cool, I remove node\_modules… next step work on the index and css file to don’t push manualy like your suggestion @julian2