Package & WP 2 Config.

package_webpack2.js

{
  "name": "materia-comp-react",
  "version": "1.0.0",
  "description": "Material Component Lib, Windy and React",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config webpack.config",
    "gulp": "gulp",
    "start": "start npm run dev:server",
    "dev:server": "webpack-dev-server --history-api-fallback",
    "prod:build": "webpack --optimize-minimize --progress --colors"
  },
  "keywords": [
    "react"
  ],
  "author": "Evelyn Hernandez",
  "license": "MIT",
  "gistdependencies": {
    "axo": "0.0.2",
    "babel-preset-stage-1": "^6.22.0",
    "cookie-handler": "^1.0.1",
    "gulp": "^3.9.1",
    "gulp-notify": "^3.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-swig": "^0.8.0",
    "jquery": "^3.2.1",
    "less-loader": "^4.0.3",
    "lodash": "^4.17.4",
    "rc-tooltip": "^3.4.2",
    "react": "^15.4.2",
    "react-absolute-grid": "^3.0.0",
    "react-addons-css-transition-group": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0",
    "react-router-dom": "^4.0.0",
    "react-toolbox": "^2.0.0-beta.5",
    "sass-loader": "^6.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.1",
    "babel-core": "^6.21.0",
    "babel-eslint": "~7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-flow-comments": "^6.22.0",
    "babel-plugin-transform-node-env-inline": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "eslint": "~3.14.0",
    "eslint-plugin-babel": "~4.0.1",
    "eslint-plugin-react": "^6.9.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "postcss-cssnext": "^2.9.0",
    "postcss-each": "^0.9.3",
    "postcss-import": "^9.1.0",
    "postcss-loader": "^1.2.2",
    "postcss-mixins": "^5.4.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-toolbox-themr": "^1.0.2",
    "redux-devtools-extension": "^1.0.0",
    "style-loader": "^0.13.1",
    "toolbox-loader": "0.0.3",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const reactToolboxVariables = {
  'color-text': '#444548',
  /* Note that you can use global colors and variables */
  'color-primary': 'rgb(218,41,28);',
  'button-height': '30px',
};

const settings = {
  entry: {
    bundle: [
      "react-hot-loader/patch",
      "./src/app/index.js"
    ]
  },
  output: {
    filename: "[name].js",
    publicPath: "/",
    path: path.join(path.join(__dirname, 'dist'), 'js'),
    libraryTarget: "amd",
  },
  resolve: {
    //extensions: [".js", ".json", ".css"]
    extensions: ['.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx']

  },
  //devtool: 'inline-source-map',
  devtool: 'source-map',
  module: {
    rules: [
      {
        //test: /\.js?$/,
         test: /(\.js|\.jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2", "stage-1",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
        test: /(\.scss|\.css)$/,
        use: ExtractTextPlugin.extract({
            use: [
              {
                loader: "css-loader",
                options: {
                  modules: true,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: "[name]--[local]--[hash:base64:8]"
                }
              },
              {
                loader: "postcss-loader",
                options: {
                  plugins: function(){
                    return [
                      /* eslint-disable global-require */
                      require('postcss-cssnext')({
                        features: {
                          customProperties: {
                            variables: reactToolboxVariables,
                          },
                        },
                      })
                    ]
                  }

                }
              }
            ]
        })
      },
    ]
  },
  externals: [
      function(context, request, callback) {
          if (/^dojo/.test(request) ||
              /^dojox/.test(request) ||
              /^dijit/.test(request) ||
              /^esri/.test(request)
          ) {
              return callback(null, "amd " + request);
          }
          callback();
      }
  ],

  devServer: {
  //  contentBase: path.resolve("src/www"),
  //  publicPath: "http://localhost:8080/", // full URL is necessary for Hot Module Replacement if additional path will be added.
  /*  quiet: false,
    hot: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true,
    inline: true
    */

    inline: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    new ExtractTextPlugin(('../css/style.css')),
    new webpack.DefinePlugin({
          "environment": '"production"',
          NODE_ENV: JSON.stringify("production")
        })
  ]

};

module.exports = settings;