I'm trying to configure webpack to work with typescript and handlebars.
Also i've added webpack-dev-server but it's not working. It says that everything is running but when i go to localhost:6000 i get This site can't be reached.
Here is my directory tree:
│ package.json
│ tsconfig.json
│ webpack.config.js
│
├───dist
│ bundle.js
│ bundle.js.map
│ index.html
│
└───src
index.handlebars
index.ts
templates.d.ts
And here is webpack.config.js file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
hot: true,
host: '0.0.0.0',
port: 6000,
open: true
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
resolve: {
extensions: ['.ts', '.js' ]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
handlebarsLoader: {}
}
}),
new HtmlWebpackPlugin({
title: 'My hometask',
template: './src/index.handlebars'
})
],
module: {
rules: [
{
test: /\.js/,
loader: 'babel',
exclude: /(node_modules|bower_components)/
},
{
test: /\.handlebars$/,
loader: "handlebars-loader"
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
]
}
};
What's wrong with that? Why i can't use dev-server?