webpack production build funktioniert nicht

Ich habe überhaupt kein Problem damit, an der Dev-Env zu arbeiten, heißes Nachladen und alles funktioniert gut. Der Versuch, eine Produktion zu bauen, erweist sich als ziemlich herausfordernd und erhält nichts als eine leere Seite. Es scheint hier ähnliche Fragen zu geben, aber ich verwende kein HTML als Einstiegspunkt. Danke im Voraus.webpack production build funktioniert nicht

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

Produktion Config

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>

Quelle

2016-04-11 chrysillo

Wie dienen Sie dem Produktbündel? Wie sieht die HTML-Datei aus, die es enthält? – Interrobang

zur Frage – chrysillo

hinzugefügt Sie sind sicher, dass Ihre 'src'-Referenz korrekt ist? Konsolenfehler? – Jack

ich mit etwas anderen Lösung gearbeitet haben. Was ich getan habe, ist das Bündeln der Dateien über Webpack, dann verwenden Sie einen Koa-Server, um eine statische Datei zu liefern und dann ein npm-Startskript, das NODE_ENV zur Produktion setzt. Werfen Sie einen Blick:

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

und finaly 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' 
    }, 
    ]) 
    ] 
};

Wenn Sie diese mit einer index.html Datei und einer main.js Datei ausführen, werden einige damit reagieren. Es wird auf Produktion laufen :) Ich habe kürzlich einen Artikel darüber geschrieben, wie genau meine Lösung aussieht. Fühlen Sie sich frei, einen Blick zu werfen: https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6

Quelle

2016-06-08 20:08:30

webpack production build funktioniert nicht

Antwort

Verwandte Themen