1

I am a java developer for years and just new to the js world. This question sounds stupid but I don't know what's the proper/best way to build a dist for reactjs app for deploying to production(nginx/apache).

From my understanding, the dist just like simple web app and should looks like contains:

  • index.html
  • client.js (bundled js after compiled)
  • static files, e.g. images, css, js libraries, etc

I follow the guide on:

it uses webpack to bundles the client.js.min and deploy to a embedded web server by node(maybe i am wrong).

Question: How to build all the things by a command, say "npm run build" and it should built everything in a folder called "dist". So I can deploy it to web server root by copying every in dist to the web root.

Project

package.json

 {
      "name": "react-tutorials",
      "version": "0.0.0",
      "description": "",
      "main": "webpack.config.js",
      "dependencies": {
        "babel-core": "^6.17.0",
        "babel-loader": "^6.2.0",
        "babel-plugin-add-module-exports": "^0.1.2",
        "babel-plugin-react-html-attrs": "^2.0.0",
        "babel-plugin-transform-class-properties": "^6.3.13",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "babel-preset-stage-0": "^6.3.13",
        "react": "^0.14.6",
        "react-dom": "^0.14.6",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.1"
      },
      "devDependencies": {},
      "scripts": {
        "dev": "webpack-dev-server --content-base src --inline --hot",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
JJJ
  • 32,902
  • 20
  • 89
  • 102
Drogba
  • 4,186
  • 4
  • 23
  • 31

1 Answers1

2

In your scripts dictionary of package.json add the following

"build" : "NODE_ENV='production' && node_modules/.bin/webpack -p"

This will tell webpack to read the config file and build it in production mode i.e minify etc etc. The -p flag does it. The node env is to ensure that production build are used for react and other libraries and to set an env variable of production for NODE_Env

To run type. npm run build

Nitish Phanse
  • 552
  • 1
  • 9
  • 16
  • I just tried,it builds me a "client.min.js" but it didn't create new any new folder on project root. I still have to copy necessary files to /dist by myself. – Drogba Sep 02 '17 at 11:11
  • 1
    Aah in your webpack config there is an output object. Edit the path field to wherever you want to dump the build. In your case dist. – Nitish Phanse Sep 02 '17 at 11:12
  • Thanks, it works now but I can only copy one file "client.min.js". How to do this with multiple files, e.g. **/*.(html|js|css) with the folder structure? – Drogba Sep 02 '17 at 11:46
  • So the entire concept of webpack is that it bundles your entire css js images etc into 1 bundle which is spat out into the output folder path. If u want to separate the css from the js bundle u will have to use the extract text plugin. From my knowledge webpack allows only one output path per config but you can tweak your config files based on this link https://stackoverflow.com/questions/35903246/how-to-create-multiple-output-paths-in-webpack-config to get what you want – Nitish Phanse Sep 02 '17 at 11:54
  • I have read the doc but i am not quite getting the concept. From my example, there at least two files(index.html and client.min.js) needed for a complete distribution(or deployment to another web server) . It sounds not make sense to bundle the index.html into js. Am i correct? – Drogba Sep 02 '17 at 12:12