英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论