我正在创建一个使用Webpack捆绑的React和react-router v4应用程序。 我正在使用Webpack创建异步分割点,以便按需异步加载我的应用程序中react-router路由的包。
假设我的应用程序名为“myapp”,当我将其部署到服务器时,静态资产需要从以下位置提供服务:
为了在部署到服务器时实现异步捆绑加载,我的Webpack输出配置如下:
在我的devServer部分中,我有这个:
当html被提供时,
如何配置webpack-dev-server将
我尝试了各种重写和代理指令,但似乎都会破坏应用程序 - 我确定有一种简单的方法被我忽略了。
非常感谢。
假设我的应用程序名为“myapp”,当我将其部署到服务器时,静态资产需要从以下位置提供服务:
/myapp/static/<assetName>
为了在部署到服务器时实现异步捆绑加载,我的Webpack输出配置如下:
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/myapp/static/",
chunkFilename: "[name].[chunkhash].bundle.js",
filename: "[name].[chunkhash].bundle.js"
}
在我的devServer部分中,我有这个:
devServer: {
historyApiFallback: true,
inline: true,
port: 4000,
publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp
}
实际部署到服务器时,我没有任何问题,但是当我运行webpack-dev-server并访问时:
http://localhost:4000/myapp
当html被提供时,
HtmlWebpackPlugin
生成的所有bundle URL都是/myapp/static/<bundleName>
,因此无法获取bundle,因为bundles在/mpapp/<bundleName>
下服务。如何配置webpack-dev-server将
/myapp/static/<bundleName>
重写为/myapp/<bundleName>
,以便路由到实际在/myapp
本地服务的bundles?我尝试了各种重写和代理指令,但似乎都会破坏应用程序 - 我确定有一种简单的方法被我忽略了。
非常感谢。
app.use("/myapp/static", express.static(path.join(__dirname, "/../public")));
。是否有一种方法可以使用webpack-dev-server实现这一点?谢谢。 - Mike