How to pack my webpack into “production”?

Question

I managed to use this react-hot-boilerplate configuration script to create and test a simple React Flux web application.

Now that I have a website that I like when I run npm start , what would be the easiest / best way to add an assembly to the configuration? When I use this “package” command, I would like to get a small prod folder with all the final html files and mini js files that I need, is that what I should expect?

This is my 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 < [e-mail] > (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" } } 

I think I want to add a new script to the list of scripts so that I can use the new npm xyz command, but I'm not sure what to write there.

---

Also my Webpack.config.js , if I can (?) Use a similar but different copy for the prod configuration:

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

And I'm not sure which parts to save, modify (prod config) or add if a copy is required ...

Answer 1

You want to start your Webpack assembly with the --optimize-minimize (reduce) and make sure that NODE_ENV set to production (this effectively disables / removes recovery code from it only for recovery, for example, checking proxy types)

You can execute this as an npm command by adding the build:production command (you can call it NODE_ENV=production webpack --optimize-minimize you like) on your package.json , for example NODE_ENV=production webpack --optimize-minimize

Add this to your package.json scripts

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

And run the command using npm run build:production

Note. It is assumed that you have already configured Webpack correctly and can build by running webpack from the command line

You may need to look at your webpack.config. I suggest learning Webpack outside of this template. Egghead.io has some great short videos on this topic (and many others) :) egghead.io/search?q=Webpack and, in particular, https://egghead.io/lessons/javascript-intro-to-webpack