现在我使用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