webpack无法解析部署

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我有一个filename 'index.js'，每当我做npm start这样的事情时，它会在目录上生成'index.js'。所以它一直存在，我从来没有太注意它。

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

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

Answer 2

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