运行服务时“无法获取 /”

Question

我对 webpack 有点陌生。

我创建了一个基于 webpack 的简单项目。

我想通过运行来测试项目：

npm run serve

我收到了消息：

无法获取 /

这是我的 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;
};

这是我的 package.json：

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "My webpack project",
  "author": "Yaniv Nahum <yanivna@microsoft.com>",
  "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"
  ]
}

我有一个 dist 文件夹，里面有 index.html 文件。

我在根文件夹中有 index.ts。

我在 dist 文件夹中有 main.js。

去的时候：

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

我看到 main.js 但没有看到 index.html

Answer 1

您可以使用html-webpack-plugin 来简化 HTML 文件的创建以提供您的 webpack 包。

1. 创建一个 HTML 文件
2. 通过script标签将bundle文件注入到html内容中。

以下是 WDS 的基本用法示例。

文件夹结构：

⚡  tree -L 4 -I 'node_modules'
.
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

0 directories, 4 files

index.js

window.onload = function onload() {
  document.body.textContent = "webpack dev server get started";
};

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isProduction = process.env.NODE_ENV === "production";

const config = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [new HtmlWebpackPlugin()],
  devServer: {
    open: true,
  },
};

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

package.json:

{
  "name": "70237549",
  "scripts": {
    "serve": "webpack-dev-server --config webpack.config.js --hot"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

执行npm run serve命令后，浏览器中的结果：

欲了解更多信息，请参阅development guide