How to create single page web application with typescript and webpack?

Question

I have been creating single page applications in Angular for some time, and now I would like to create a single page application but without using the entire framework.

I would like to have one .html file, and one javascript file, which would be compiled typescript file, say index.ts. And inside index.ts I would import things from other typescript files.

Are there any projects online which are similar to what I want to achive, and is it possible to setup npm project like this at all?

Edit:

After some time, this is what I accomplished: My project structure:

├── bundle.js
├── functions.ts
├── index.html
├── index.ts
├── package.json
├── style.css
├── tsconfig.json
└── webpack.config.js

package.json

{
  "name": "rxjs6-demo",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "ts-loader": "^5.3.1",
    "typescript": "^3.2.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "rxjs": "^6.4.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
      "outDir": ".",
      "noImplicitAny": false,
      "sourceMap": true,
      "module": "es6",
      "target": "es6",
      "allowJs": true
    },
    "include": ["*.ts"],
    "exclude": []
}

webpack.config.json

module.exports = {
  entry: './index.ts',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: '.'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  }
};

index.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

running npm start will start a webpack-dev-server which recompiles my application each time any typescript file changes. Inside index.ts I can import stuff from other .ts files. But what I couldn't accomplish is making webpack-dev-server reload my app in the browser when html or css files change.

Any help or general suggestions about the structure of my application will be greatly appreciated.

Kirk Larkin · Accepted Answer · 2019-02-23 12:44:04Z

With the current setup, Webpack is not processing your .html and .css files, so it stands to reason that it's also not monitoring them for changes. Rather than adding link tags into your .html file for the .css files, you can instruct Webpack to process the .css files using css-loader and style-loader.

First, you need to install css-loader and style-loader. e.g.:

npm i -D css-loader style-loader

css-loader is responsible for processing CSS files and style-loader is responsible for injecting them into the DOM. When using this approach, the output bundle.js (in your example) will contain the transpiled JavaScript and the CSS, with the CSS itself being wrapped up in JavaScript and DOM manipulation.

Next, you need to add a rule to webpack.config.js:

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

This rule, which sits in the rules array alongside your existing ts-loader rule, instructs Webpack to process .css files first using css-loader and then style-loader.

Lastly, you can add an import into your index.ts file:

import './style.css';

That should be all that's needed for Webpack to start processing and monitoring your .css file. For additional files, you can add more import statements as shown above.

As for .html files, there's a good answer for that here that should help. There's also a great tutorial/online book on the styling topic (and almost everything else you could need) by SurviveJS here. The book also covers things like building for production, which allows for extracting the CSS content out into a separate file for production builds, etc.

Collectives™ on Stack Overflow

How to create single page web application with typescript and webpack?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related