webpack React应用程序在组件文件夹而不是项目根目录中查找React. js

but5z9lq  于 2023-11-19  发布在  Webpack
关注(0)|答案(2)|浏览(150)

下面我得到的错误在我刷新嵌套路由(register/email-confirmation)后显示在控制台中。而非嵌套路由不会得到此错误。
我认为主要的问题是它在嵌套的路由路径中搜索weble.js和图像,而不是根路径。

我的控制台错误:

第一个月
Refused to execute script from 'http://localhost:3002/register/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
GET http://localhost:3002/register/a5e694be93a1c3d22b85658bdc30008b.png 404 (Not Found)

我的webpack.config.js:

  1. const webpack = require('webpack');
  2. const path = require('path');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const BUILD_PATH = path.resolve( __dirname, "./client/build" );
  5. const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
  6. const PUBLIC_PATH = "/";
  7. ...
  8. module.exports = {
  9. devtool: 'eval-source-map',
  10. context: SOURCE_PATH,
  11. entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],
  12. module: {
  13. rules: [
  14. {
  15. test: /\.jsx?$/,
  16. exclude: [/node_modules/, /server/],
  17. use: {
  18. loader: 'babel-loader',
  19. options: {
  20. presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
  21. plugins: [
  22. 'transform-decorators-legacy',
  23. 'transform-es2015-destructuring',
  24. 'transform-es2015-parameters',
  25. 'transform-object-rest-spread'
  26. ]
  27. }
  28. }
  29. },
  30. {
  31. test: /\.scss$/,
  32. use: [{
  33. loader: "style-loader"
  34. }, {
  35. loader: "css-loader"
  36. }, {
  37. loader: "sass-loader"
  38. }]
  39. },
  40. {
  41. test: /\.(png|jpg|gif)$/,
  42. use: [
  43. {
  44. loader: 'file-loader',
  45. options: {}
  46. }
  47. ]
  48. },
  49. ],
  50. },
  51. output: {
  52. path: BUILD_PATH,
  53. filename: "bundle.js",
  54. },
  55. devServer: {
  56. compress: true,
  57. port: 3002,
  58. historyApiFallback: true,
  59. contentBase: BUILD_PATH,
  60. publicPath: PUBLIC_PATH,
  61. },
  62. plugins: [
  63. new webpack.DefinePlugin(appConstants),
  64. new HtmlWebpackPlugin({
  65. filename: 'index.html',
  66. template: path.resolve(__dirname, 'client/src/index.html'),
  67. inject: true
  68. }),
  69. ],
  70. watch: true,
  71. }

字符串

ufj5ltwl

ufj5ltwl1#

我不知道这个bug,但我强烈建议使用fuse-box
fuse-box是构建系统的未来,在几分钟内,您将通过高速热重载和许多其他实用程序运行您的项目。
看看这个react example seed,真是太神奇了。

yqhsw0fo

yqhsw0fo2#

在HTMLWebPackPlugin中使用base选项。

  1. new HtmlWebpackPlugin({
  2. template: path.join(__dirname, 'public', 'index.html'),
  3. title: 'my title',
  4. static: 'static',
  5. base: '/',
  6. }),

字符串
它是在标头中附加标签基础。然后工作正常。

  1. <base href='/'>


https://github.com/jantimon/html-webpack-plugin#options

相关问题