我在开发环境上工作没有任何问题，热重载并且一切正常。事实证明，尝试制作一个作品非常具有挑战性，除了一张空白页之外什么也没有。这里似乎有类似的问题，但我没有使用任何 html 作为入口点。提前致谢。
package.json
{
"name": "dc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
"prod": "webpack -p --progress --config prod.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.9.1",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-css-transition-replace": "^1.1.0",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.14"
},
"dependencies": {
"axios": "^0.9.1",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"react": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1"
}
}
生产配置
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : ["./app/App.js"],
output : {
filename: "bundle.js",
publicPath: 'dist/',
path : path.resolve(__dirname, 'dist/')
},
devtool: 'source-map',
devServer: {
contentBase: 'dist/'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("styles.css"),
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
}),
],
module : {
loaders : [
{ test : /\.jsx?$/, loader : 'babel-loader',
query : {
presets : ['react', 'es2015', 'react-hmre']
}
},
{ test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
最佳答案
我一直在使用有点不同的解决方案。我一直在做的是通过 webpack 捆绑文件，然后使用 koa 服务器来提供静态文件，然后使用 npm 启动脚本将 NODE_ENV 设置为生产环境。看看:
package.json:
{
"name": "react",
"version": "1.0.0",
"description": "some description",
"main": "index.js",
"scripts": {
"test": "test",
"start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
"dev": "webpack-dev-server --progress --colors --watch",
"build": "webpack --progress --watch"
},
"author": "your_name",
"license": "ISC",
"dependencies":{
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"image-webpack-loader": "^1.6.3",
"json-loader": "^0.5.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"koa": "2.0.0-alpha.3",
"koa-convert": "1.2.0",
"koa-static": "2.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
server.js:
'use strict';
const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));
const server = app.listen(port, function () {
let host = server.address().address;
let port = server.address().port;
console.log('listening at http://%s:%s', host, port);
});
最后webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './main.js',
output: { path: __dirname + "/build/", filename: 'bundle.js' },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass?")
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin("main.css"),
new CopyWebpackPlugin([
{
from: __dirname + '/index.html',
to: __dirname + '/index.html'
},
])
]
};
如果您将使用一个 index.html 文件和一个 main.js 文件来运行它们，并对其做出一些 react ，它将在生产环境中运行:) 我最近写了一篇关于我的解决方案到底是什么样子的文章。欢迎查看:https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6
关于reactjs - webpack 生产构建无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36559090/