I'm a little new to webpack.

I created a simple project based on webpack.

I want to test the project by running:

npm run serve

I'm getting the message:

Cannot GET /

This is my webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';


const stylesHandler = 'style-loader';



const config = {
    entry: './index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        host: 'localhost'
    },
    plugins: [
        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/i,
                loader: 'ts-loader',
                exclude: ['/node_modules/'],
            },
            {
                test: /\.css$/i,
                use: [stylesHandler,'css-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
        
        
    } else {
        config.mode = 'development';
    }
    return config;
};

This is my package.json:

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "My webpack project",
  "author": "Yaniv Nahum <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs",
    "build": "webpack --mode=production --node-env=production",
    "build2": "tsc --build",
    "clean": "tsc --build2 --clean",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack-dev-server --config webpack.config.js --hot"
  },
  "devDependencies": {
    "@types/d3": "^4.12.0",
    "@types/node": "^12.0.4",
    "@types/webpack": "^4.4.32",
    "@webpack-cli/generators": "^2.4.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^6.5.1",
    "d3": "^4.13.0",
    "declaration-bundler-webpack-plugin": "^1.0.3",
    "style-loader": "^3.3.1",
    "ts-loader": "^6.2.2",
    "typescript": "^3.9.10",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "wepack-cli": "0.0.1-security"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

I have a dist folder with the index.html file inside.

I have index.ts in the root folder.

I have main.js inside the dist folder.

When going to:

http://localhost:8080/webpack-dev-server

I see main.js but not index.html

CodePudding user response：

You can use

For more info, see development guide