├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── index.js ├── package.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![No longer maintained](https://img.shields.io/badge/Maintenance-OFF-red.svg) 2 | ### [DEPRECATED] This repository is no longer maintained 3 | > While this project is fully functional, the dependencies are no longer up to date. You are still welcome to explore, learn, and use the code provided here. 4 | > 5 | > Modus is dedicated to supporting the community with innovative ideas, best-practice patterns, and inspiring open source solutions. Check out the latest [Modus Labs](https://labs.moduscreate.com?utm_source=github&utm_medium=readme&utm_campaign=deprecated) projects. 6 | 7 | [![Modus Labs](https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.png)](https://labs.moduscreate.com?utm_source=github&utm_medium=readme&utm_campaign=deprecated) 8 | 9 | --- 10 | # webpack-react-es6-production-optimization 11 | Optimize Webpack + React + ES6 + Babel app production build file size 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hanging 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDom from 'react-dom'; 3 | 4 | ReactDom.render(( 5 |
Hello
6 | ), document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-react-es6-prodbuild", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/ModusCreateOrg/webpack-react-es6-production-optimization" 9 | }, 10 | "scripts": { 11 | "start": "webpack --progress --watch -p", 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "author": "Grgur Grisogono", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "babel": "^6.0.15", 18 | "babel-core": "^6.1.2", 19 | "babel-loader": "^6.1.0", 20 | "babel-preset-es2015": "^6.1.2", 21 | "babel-preset-react": "^6.1.2", 22 | "webpack": "^1.12.3" 23 | }, 24 | "dependencies": { 25 | "react": "^0.14.2", 26 | "react-dom": "^0.14.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | 7 | // Step 1: Source Maps 8 | // devtool: 'cheap-module-source-map', 9 | 10 | entry: './index', 11 | output: { 12 | path: path.join(__dirname, 'dist'), 13 | filename: 'bundle.js', 14 | publicPath: '/static/', 15 | }, 16 | 17 | // Step 2: Node environment 18 | // plugins: [ 19 | // new webpack.DefinePlugin({ 20 | // 'process.env': { 21 | // 'NODE_ENV': JSON.stringify('production') 22 | // } 23 | // }) 24 | // ], 25 | 26 | module: { 27 | loaders: [ 28 | { 29 | test: /\.js$/, 30 | loaders: ['babel'] 31 | } 32 | ] 33 | } 34 | }; 35 | --------------------------------------------------------------------------------