我正在尝试设置一个新项目,并且在使用webpack-dev-server时遇到了一些麻烦,看起来客户端编译成功但我无法查看index.html或main.js,它们似乎没有可用。 我尝试了一些不同的webpack配置设置,但似乎都没有。
我有一个项目,它有一个客户端和一个服务器目录,我的文件夹结构如下:
> project
> dist
> src
> client
client.tsx
webpack.config.js
> server
package.json
在package.json中,我有一个开发客户端脚本:"dev-client": "cd ./src/client && webpack-dev-server -w",
我的webpack.config.js看起来像这样(我已经改变它了很多试图让它工作):
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const projectRoot = path.join(__dirname, "..", "..");
module.exports = {
devtool: "inline-source-map",
mode: "development",
entry: "./client",
output: {
path: path.join(projectRoot, "dist", "public"),
publicPath: "/public/",
},
resolve: {
extensions: [".js", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: "ts-loader",
},
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "sass-loader",
},
],
},
{
test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot)$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin(),
],
devServer: {
contentBase: path.join(projectRoot, "dist"),
},
}
当我运行npm run dev-client
时,我收到成功消息i 「wdm」: Compiled successfully.
,但当我导航到http://localhost:8080/时,我看到的是将服务器编译到dist文件夹。
依赖关系信息:
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^4.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
答案 0 :(得分:1)
因此经过一系列的测试后我发现回滚到webpack-dev-server的3.1.1修复了这个问题,这引出了我的问题: https://github.com/webpack/webpack-dev-server/issues/1373
其中说这个问题是由项目路径中的空格引起的。我删除了空格,效果很好。
发布此处以防其他人遇到同样的问题。