webpack prodüksiyon çalışmıyor Çalışmıyor

Dev env üzerinde çalışırken sorun yaşamadım, sıcak yeniden yükleme ve her şey iyi çalışıyor. Bir prodüksiyon yapmaya çalışmak, ispatlamak için oldukça zorlayıcı, boş bir sayfadan başka bir şey elde etmeyecek. Burada benzer sorular var gibi görünüyor ama giriş noktası olarak herhangi bir html kullanmıyorum. Şimdiden teşekkürler.webpack prodüksiyon çalışmıyor Çalışmıyor

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

üretim yapılandırma biraz farklı bir çözeltisi ile çalışmaktadır

<!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>

kaynak

2016-04-11 chrysillo

Ürün paketi nasıl sunuluyor? İçerdiği HTML dosyası nasıl görünür? – Interrobang

soru – chrysillo

'src' referansınızın doğru olduğundan emin misiniz? Konsol hataları? – Jack

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. Yaptığım şey, dosyaları web paketi ile paketlemek, ardından statik bir dosyaya hizmet vermek için bir koa sunucusu kullanmak ve daha sonra NODE_ENV'yi üretime ayarlayan bir npm başlatma komut dosyasına sahip olmak.

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: bir göz atın

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

ve sonda gelen 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' 
    }, 
    ]) 
    ] 
};

Bir index.html dosyası ve bir main.js dosyası ile bunları çalıştırırsanız, bazı tepkiler oluşturmaya çalışacaksınız. Üretimde çalışmaya devam edecek :) Son zamanlarda çözümümün nasıl göründüğüyle ilgili bir makale yazdım. Bir göz atmaktan çekinmeyin: https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6

kaynak

2016-06-08 20:08:30

webpack prodüksiyon çalışmıyor Çalışmıyor

cevap

İlgili konular