Fatal编程技术网
  • reactjs/
  • Reactjs 网页包生成不工作

Reactjs 网页包生成不工作

reactjs webpack

Reactjs 网页包生成不工作,reactjs,webpack,production,Reactjs,Webpack,Production,我没有任何问题，无论是在开发环境工作，热重新加载和一切工作正常。事实证明，试图制作一个产品构建非常具有挑战性，只能得到一张空白页。这里似乎有类似的问题，但我不使用任何html作为入口点。提前谢谢 package.json { "name": "dc", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server -d --conte

我没有任何问题，无论是在开发环境工作，热重新加载和一切工作正常。事实证明，试图制作一个产品构建非常具有挑战性，只能得到一张空白页。这里似乎有类似的问题，但我不使用任何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捆绑文件，然后使用膝关节炎服务器来服务静态文件，然后有一个NPM启动脚本将NoDEYNEV设置为生产。看一看:

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"
  }
}

'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);
});

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'
     },
   ])
  ]
};
server.js：

{

  "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"
  }
}

'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);
});

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'
     },
   ])
  ]
};
最后webpack.config.js：

{

  "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"
  }
}

'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);
});

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文件运行它们，并呈现一些对它的反应，那么它将在生产环境中运行：）我最近写了一篇文章，介绍了我的解决方案的具体外观。请随意查看：

您如何提供产品包？包含它的HTML文件是什么样子的？将它添加到问题中您确定您的
src
引用是正确的吗？控制台错误？我在构建过程中并没有收到任何错误，不确定src引用的含义。所有文件都会生成到dist文件夹，当您打开html时，它会加载一段时间，但不会执行任何操作。当您看到源代码时，可以看出它指向构建的文件，这是因为伙计们刚刚从babel配置中删除了“react hmre”。为帮助干杯