英文:
Webpack dev server returns 404 when landing to app
问题
Webpack开发服务器在着陆页不是首页时返回404。
问题是当着陆到localhost:8080/page
时,应用程序从http://localhost:8080/page/bundle.js?08386a6ab2de89169893
请求bundle.js
,然后返回404。
当尝试从首页http://localhost:8080/bundle.js?08386a6ab2de89169893
请求时,开发服务器返回200。
我的webpack.config.js文件如下:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default
const styledComponentsTransformer = createStyledComponentsTransformer()
const basePath = __dirname
module.exports = function(env, arg) {
const base = {
context: path.join(basePath, 'src'),
entry: ['./index.tsx'],
output: {
path: path.join(basePath, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
getCustomTransformers: () => ({
before: [styledComponentsTransformer],
}),
},
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.mjs', '.tsx', '.ts', '.js'],
alias: {
react: path.resolve(__dirname, 'node_modules', 'react'),
'~': path.resolve('./src'),
},
},
devtool: 'source-map',
externals: {
React: 'react',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
compress: true,
historyApiFallback: true,
proxy: {
'/graphql': {
secure: false,
target: 'http://gepick.com:4002/graphql',
changeOrigin: true,
},
'/predict': {
secure: false,
target: 'http://localhost:5000',
changeOrigin: true,
},
},
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //Name of file in ./dist/
template: 'index.html', //Name of template in ./src
hash: true,
}),
],
}
return base
}
英文:
Webpack dev server returns 404 when landing not to index page.
Problem is when landing example to localhost:8080/page
app request bundle.js
from http://localhost:8080/page/bundle.js?08386a6ab2de89169893
and then return 404
When try request from index http://localhost:8080/bundle.js?08386a6ab2de89169893
dev-server returns 200
my webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default
const styledComponentsTransformer = createStyledComponentsTransformer()
const basePath = __dirname
module.exports = function(env, arg) {
const base = {
context: path.join(basePath, 'src'),
entry: ['./index.tsx'],
output: {
path: path.join(basePath, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
getCustomTransformers: () => ({
before: [styledComponentsTransformer],
}),
},
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.mjs', '.tsx', '.ts', '.js'],
alias: {
react: path.resolve(__dirname, 'node_modules', 'react'),
'~': path.resolve('./src'),
},
},
devtool: 'source-map',
externals: {
React: 'react',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
compress: true,
historyApiFallback: true,
proxy: {
'/graphql': {
secure: false,
target: 'http://gepick.com:4002/graphql',
changeOrigin: true,
},
'/predict': {
secure: false,
target: 'http://localhost:5000',
changeOrigin: true,
},
},
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //Name of file in ./dist/
template: 'index.html', //Name of template in ./src
hash: true,
}),
],
}
return base
}
答案1
得分: 7
我添加了publicPath: '/'
到output
output: {
path: path.join(basePath, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
现在它按预期工作。
英文:
I added publicPath: '/'
to output
output: {
path: path.join(basePath, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
now it`s works as expect
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论