https://github.com/naveen-ithappu/tswebpack-starterkit

Project setup to use Webpack 4 with Typescript and SCSS
https://github.com/naveen-ithappu/tswebpack-starterkit

clean-webpack-plugin dotenv minicssextractplugin scss ts-loader typescript typescript2 webpack webpack-config webpack-configuration webpack-dev-server webpack-manifest webpack-manifest-plugin webpack4

Last synced: about 2 months ago
JSON representation

Project setup to use Webpack 4 with Typescript and SCSS

• Host: GitHub
• URL: https://github.com/naveen-ithappu/tswebpack-starterkit
• Owner: naveen-ithappu
• License: gpl-3.0
• Created: 2018-06-21T19:28:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-21T19:57:04.000Z (over 6 years ago)
• Last Synced: 2024-10-31T08:42:28.820Z (3 months ago)
• Topics: clean-webpack-plugin, dotenv, minicssextractplugin, scss, ts-loader, typescript, typescript2, webpack, webpack-config, webpack-configuration, webpack-dev-server, webpack-manifest, webpack-manifest-plugin, webpack4
• Language: TypeScript
• Size: 92.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: ReadMe.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Webpack 4 + Typescript 2.9 + Scss Starter Kit

This is sample project setup to get started with **WebpackV4** with **Typescript** and **Scss**

### Loaders & Plugins Used

- CSS

    - MiniCssExtractPlugin

    - css-loader

    - sass-loader

- TypeScript

    - ts-loader

    - fork-ts-checker-webpack-plugin

    

- Font

    - file-loader

- Images

    - url-loader

    - file-loader (fall back for large images)

- JSON

    - json-loader

- Others

    

    `html-webpack-plugin` -  Auto inject Script and style tag

    

    `clean-webpack-plugin` - Clear dist folder

    

    `webpack-manifest-plugin` - generate manifest.json file

         

### TSConfig

```

{

    "compilerOptions": {

        "target": "es5",

        "module": "commonjs",

        "lib": [

            "es2016",

            "dom"

        ],

        "allowJs": false,

        "jsx": "react",

        "sourceMap": true,

        "strict": true,

        "noImplicitAny": true,

        "alwaysStrict": true,

        "baseUrl": "./",

        "allowSyntheticDefaultImports": true,

        "esModuleInterop": true

    },

    "include": [

        "src/**/*"

    ],

    "exclude": [

        "node_modules"

    ]

}

```

                    

### NPM Commands

`npm run dev`  - To start a dev server

`npm run build` - To generate bundle

### .ENV

`.env` folder contains environment specific configuration  variables to handle `dev` and `production` modes independently