webpack 无法在部署时解析 reactjs 应用程序中的文件夹

Question

我正在创建一个 reactjs 应用程序，并且在 localhost 上一切正常。当我将应用程序部署到托管服务时，事情变得非常有问题。

我的项目中有一个./reducers 文件夹，其中包含我所有的reducer。 项目结构是这样的：

• 应用
• ---减速器
• ---store.js

现在的问题是 webpack 无法解决我 store.js 上的 import reducers from './reducers' 这是我的完整 store.code：

import {applyMiddleware, createStore} from 'redux';

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';

import reducer from './reducers';

const middleware = applyMiddleware(promise(), thunk, logger())
  
export default createStore(reducer, middleware)

这是我的 webpack 配置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
	entry: './main.js',
	output:{
		path: __dirname,
		filename: 'index.js',
		publicPath: '/'
	},
	devServer:{
		inline: true,
		port: 1515,
		historyApiFallback: true
	},
	module:{
		loaders:[
		{
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel-loader',
			query:{
				presets: ['react', 'es2015'],
				plugins: ['react-html-attrs', 'transform-object-rest-spread']
			}
		}
		]
	}
}

这是来自我的托管服务器的错误：

对于这篇超长的帖子，我真的很抱歉，我一直在谷歌搜索，但没有找到我能理解的答案。部署 reactjs 应用程序和 webpack 对我来说是新事物

Answer 1

好吧，在尝试消化了我得到的关于这件事的所有信息之后，我终于明白了如何部署 webpack 项目..

正如@JoeClay 所说，我应该从 Webpack 部署最终构建，这与我所做的相反。我所做的是将整个项目文件上传到托管服务器并尝试从那里运行 webpack。我将生产阶段视为本地开发阶段，这是不对的。

在网上寻找了很多关于如何构建 Webpack 项目的信息后，我终于意识到，我一直都带着构建文件。 如果我们回顾一下我的 Webpack.config.js

module.exports = {
	entry: './main.js',
	output:{
		path: __dirname,
		filename: 'index.js',
		publicPath: '/'
	},
	devServer:{
		inline: true,
		port: 1515,
		historyApiFallback: true
	},
	module:{
		loaders:[
		{
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel-loader',
			query:{
				presets: ['react', 'es2015'],
				plugins: ['react-html-attrs', 'transform-object-rest-spread']
			}
		}
		]
	}
}

我们可以看到，在output 中，我有一个'index.js' 的filename，每次我执行npm start 之类的操作时，它都会在目录中生成'index.js'。所以它一直都在那里，只是我从来没有太在意过它。

接下来我做的很简单，我去我的托管服务器并上传我的Index.html 以及我的CSS、JS 和'index.js' 文件，瞧！有用！ 但是有一个问题我还没有解决。不知何故，在我上传文件后，在我的index.html 文件中，<script src="index.js"></script> 被注释掉了。如果有人能给我对此的见解，我将不胜感激.

希望这个帖子可以帮助像我这样的新手 webpack 用户，并可以帮助他们部署到 heroku 或 digitalocean 以外的主机。感谢所有花时间回答我问题的人

Answer 2

问题是找不到您的减速器导入。您需要检查相对于商店所在位置的路径。