Come pacchettizzare a 'produzione' il mio sito web reagire con Webpack?

Question

Sono riuscito a utilizzare questo script di configurazione react-hot-boilerplate per creare e testare una semplice webapp React Flux.

Ora che ho un sito Web che mi piace quando eseguo npm start, quale sarebbe il modo più semplice/migliore per aggiungere una build di produzione nella configurazione? Quando utilizzo il comando "pacchetto", vorrei ottenere una piccola cartella prod con tutti i file finali html e minificati di cui ho bisogno, è quello che dovrei aspettarmi?

Questo è il mio package.json:

{ 
    "name": "react-hot-boilerplate", 
    "version": "1.0.0", 
    "description": "Boilerplate for ReactJS project with hot code reloading", 
    "scripts": { 
    "start": "node server.js", 
    "lint": "eslint src" 
    }, 
    "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)", 
    "license": "MIT", 
    "bugs": { 
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues" 
    }, 
    "homepage": "https://github.com/gaearon/react-hot-boilerplate", 
    "devDependencies": { 
    "babel-core": "^5.4.7", 
    "babel-eslint": "^3.1.9", 
    "babel-loader": "^5.1.2", 
    "eslint-plugin-react": "^2.3.0", 
    "react-hot-loader": "^1.2.7", 
    "webpack": "^1.9.6", 
    "webpack-dev-server": "^1.8.2" 
    }, 
    "dependencies": { 
    "react": "^0.13.0", 
    "flux": "^2.0.2", 
    "events": "^1.0.2", 
    "object-assign": "^3.0.0", 
    "jquery": "^2.1.4", 
    "imports-loader": "^0.6.4", 
    "url-loader": "^0.5.6", 
    "numeral": "^1.5.3", 
    "bootstrap": "^3.3.5", 
    "d3": "^3.5.6", 
    "zeroclipboard": "^2.2.0", 
    "react-toastr": "^1.5.1", 
    "d3-legend": "^1.0.0" 
    } 
} 

Io credo di voler aggiungere un nuovo script nell'elenco degli script in modo da poter utilizzare un nuovo comando npm xyz ma non sono sicuro di cosa scrivere lì .

---

Anche i miei Webpack.config.js, nel caso in cui potrebbe essere necessario utilizzare una copia simile, ma distinta per la configurazione prod (?):

var path = require('path'); 
    var webpack = require('webpack'); 

    module.exports = { 
    devtool: 'eval', 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './src/index' 
    ], 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/static/' 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) 
    ], 
    externales: { "jquery": "jQuery", "$": 'jQuery' }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      loaders: ['react-hot', 'babel'], 
      include: path.join(__dirname, 'src') 
     }, 
     { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest 
     ] 
    } 
    }; 

E non sono sicuro quali parti di mantenere, alterare (prod config) o aggiungere se è richiesta una copia ...

Answer 1

Ti consigliamo di eseguire il Webpack costruire con le --optimize-minimize opzione (minifies) e assicurarsi che NODE_ENV è impostato su production (questo effetto ctively disabilita/strisce fuori Reagire di sviluppo solo il codice, come tipi prop controllo)

È possibile raggiungere questo obiettivo come un comando NPM con l'aggiunta di un build:production (è possibile denominare questo quello che vuoi) comando al package.json come NODE_ENV=production webpack --optimize-minimize

Aggiungi questo al di tuo package.json scripts

"build:production": "NODE_ENV=production webpack --optimize-minimize" 

ed eseguire il comando tramite npm run build:production

Nota: questo è supponendo che avete già configurato correttamente Webpack e può "costruire" eseguendo webpack dalla riga di comando

Potrebbe essere necessario guardare il vostro webpack.config Suggerisco di conoscere Webpack al di fuori di questo testo standard. Egghead.io ha alcuni grandi video brevi sull'argomento (e molti altri) :) egghead.io/search?q=Webpack e in particolare https://egghead.io/lessons/javascript-intro-to-webpack