Reactjs 子目录中的网页包开发服务器-未编译&;没有热重新加载
我试图在一个子目录(public)中运行webpack dev server,以便将react集成到现有站点中 当我从子目录运行它时,使用Reactjs 子目录中的网页包开发服务器-未编译&;没有热重新加载,reactjs,webpack,webpack-dev-server,Reactjs,Webpack,Webpack Dev Server,我试图在一个子目录(public)中运行webpack dev server,以便将react集成到现有站点中 当我从子目录运行它时,使用npm run start,既不进行热重新加载也不进行编译,但是当我从根目录运行它们时,如果没有--content base或devServer.publicPath,它工作得很好 文件夹结构- |- App/ |- node-modules/ |- public/ |- react/ |- main.
npm run start
,既不进行热重新加载也不进行编译,但是当我从根目录运行它们时,如果没有--content base
或devServer.publicPath
,它工作得很好
文件夹结构-
|- App/
|- node-modules/
|- public/
|- react/
|- main.js
|- index.html
|- shared/
|- react/
|- components/
|- main.js
|- package.json
|- webpack.config.js
index.html包含
网页包配置-
const path = require('path');
const config = {
entry: './shared/react/main.js',
output: {
publicPath: "public/react",
path: path.resolve(__dirname, 'public/react'),
filename: 'main.js',
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
devServer: {
inline: true,
publicPath: "public/",
contentBase: path.join(__dirname, "public"),
hot: true,
port: 8080,
},
}
pacakge.json-
{
"name": "App",
"version": "1.0.0",
"repository": "Ash-repo",
"description": "App",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"path": "^0.12.7",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^2.5.0",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server --content-base public/ --hot --progress --colors",
"watch": "webpack --progress --colors --watch",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
看不出它为什么没有编译或重新加载,我已经设置了publicPath
(在output和devServer中)和content base
指向public。我看http://localhost:8080/webpack-开发服务器/
和http://localhost:8080/
但不会重新加载或编译
任何帮助都将不胜感激 网页包配置似乎不正确。使用下面的网页包配置将在子目录的情况下启用热重新加载
const path = require('path');
const config = {
entry: './shared/react/main.js',
output: {
publicPath: "public/react",
path: path.resolve(__dirname, 'public/react'),
filename: 'main.js',
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
devServer: {
inline: true,
publicPath: "/react/",
contentBase: path.join(__dirname, "public"),
hot: true,
port: 8070
}
}
devServer.publicPath是这里的重要变化。有关它的更多信息,请访问webpack的官方文档
我希望这有帮助 更新devServer historyapi回退中的webpack配置文件:{disableDotRule:true}更新脚本:webpack dev server--content base public/--hot--progress--colors--history api-fallback@Kasiriveni谢谢你的帮助!刚试过,但运气不好!