Webpack dev server返回404错误,当访问应用程序时。

huangapple go评论61阅读模式
英文:

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

huangapple
  • 本文由 发表于 2020年1月6日 22:36:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/59613941.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定