当我使用clean-webpack-plugin时,Webpack开发服务器停止

时间:2019-12-06 15:02:33

标签: javascript reactjs webpack webpack-dev-server

现在我使用webpack-dev-server版本3.9.0和clean-webpack-plugin版本3.0.0

Webpack开发服务器构建我的应用程序,并在我更改源时在“发射后98%”处停止。如果没有clean-webpack-plugin,一切都会很好。

这是我的配置:

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

function getWebpackConfig(env) {
    const isProduction = env.production === "true";

    return {
        target: "web",
        mode: isProduction ? "production" : "development",
        entry: path.resolve("src", "main.tsx"),
        output: {
            path: path.resolve("dist"),
            filename: "script.js"
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: "ts-loader"
                }
            ],
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js", ".css"]
        },
        devtool: isProduction ? "source-map" : "cheap-module-eval-source-map",
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: "./src/index.html"
            })
        ],
        devServer: {
            contentBase: "./dist",
            index: "index.html",
            historyApiFallback: true,
            host: "0.0.0.0",
            port: 22039,
            hot: true,
            overlay: true
        }
    };
}

module.exports = getWebpackConfig;

现在我只使用一个ts文件(它是react组件)

import React, {
    Component
} from "react";

export class Application extends Component {
    public render() {
        return (
            <>
                <h1>Hello, world!!</h1>
            </>
        );
    }
}

还有

import React from "react";
import { render } from "react-dom";
import { Application } from "./components/application/application";

const applicationRoot = document.getElementById("applicationRoot");

function removeApplicationPreview(): void {
    const applicationPreview = document.getElementById("applicationPreview");

    if (applicationPreview) {
        applicationPreview.remove();
    }
}

render(<Application />, applicationRoot, removeApplicationPreview);

我这样运行:

webpack-dev-server --env.production=false --progress

0 个答案:

没有答案