├── src
    ├── index.css
    ├── exampleModule.js
    ├── App.test.js
    ├── echo.webworker.js
    ├── App.css
    ├── index.js
    ├── App.js
    ├── registerServiceWorker.js
    └── logo.svg
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .gitignore
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── README.md
└── package.json


/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stereobooster/cra-webworker-example/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/exampleModule.js:
--------------------------------------------------------------------------------
1 | export default function exampleModule(argument) {
2 |   console.log(argument)
3 | };
4 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/src/echo.webworker.js:
--------------------------------------------------------------------------------
 1 | import { default as exampleModule } from './exampleModule';
 2 | 
 3 | self.onmessage = function(e) {
 4 |   console.log('[WORKER]', e.data.message);
 5 |   exampleModule('test');
 6 |   self.postMessage({
 7 |     message: 'Message from worker'
 8 |   });
 9 | };
10 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 80px;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #222;
12 |   height: 150px;
13 |   padding: 20px;
14 |   color: white;
15 | }
16 | 
17 | .App-intro {
18 |   font-size: large;
19 | }
20 | 
21 | @keyframes App-logo-spin {
22 |   from { transform: rotate(0deg); }
23 |   to { transform: rotate(360deg); }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import registerServiceWorker from './registerServiceWorker';
 5 | import './index.css';
 6 | 
 7 | import {default as echoWorker} from './echo.webworker.js';
 8 | 
 9 | const worker = new Worker(echoWorker);
10 | worker.onmessage = function(e) {
11 |   console.log('[MAIN]', e.data.message);
12 | };
13 | worker.postMessage({
14 |   message: 'Message from window'
15 | });
16 | 
17 | ReactDOM.render(<App />, document.getElementById('root'));
18 | registerServiceWorker();
19 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import logo from './logo.svg';
 3 | import './App.css';
 4 | 
 5 | class App extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="App">
 9 |         <div className="App-header">
10 |           <img src={logo} className="App-logo" alt="logo" />
11 |           <h2>Welcome to React</h2>
12 |         </div>
13 |         <p className="App-intro">
14 |           To get started, edit <code>src/App.js</code> and save to reload.
15 |         </p>
16 |       </div>
17 |     );
18 |   }
19 | }
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | process.env.NODE_ENV = 'test';
 4 | process.env.PUBLIC_URL = '';
 5 | 
 6 | // Makes the script crash on unhandled rejections instead of silently
 7 | // ignoring them. In the future, promise rejections that are not handled will
 8 | // terminate the Node.js process with a non-zero exit code.
 9 | process.on('unhandledRejection', err => {
10 |   throw err;
11 | });
12 | 
13 | // Ensure environment variables are read.
14 | require('../config/env');
15 | 
16 | const jest = require('jest');
17 | const argv = process.argv.slice(2);
18 | 
19 | // Watch unless on CI or in coverage mode
20 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
21 |   argv.push('--watch');
22 | }
23 | 
24 | 
25 | jest.run(argv);
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webworkers for CRA
 2 | 
 3 | Issue in CRA repo: https://github.com/facebookincubator/create-react-app/issues/1277
 4 | 
 5 | This is CRA ejected project in which I prototype webpack configuration for webworker.
 6 | 
 7 | Idea: use `*.webworker.js` as convention over configuration.
 8 | 
 9 | For example [mapbox-gl-js/src/util/browser/web_worker.js](https://github.com/mapbox/mapbox-gl-js/blob/b9e10b939c6a3fe5d7ecac209f751b4871970ede/src/util/browser/web_worker.js) instead of:
10 | 
11 | ```js
12 | 'use strict';
13 | 
14 | const WebWorkify = require('webworkify');
15 | const window = require('../window');
16 | const workerURL = window.URL.createObjectURL(new WebWorkify(require('../../source/worker'), {bare: true}));
17 | 
18 | module.exports = function () {
19 |     return new window.Worker(workerURL);
20 | };
21 | ```
22 | 
23 | Will do:
24 | ```js
25 | 'use strict';
26 | 
27 | const workerURL = require('../../source/worker.webworker');
28 | 
29 | module.exports = function () {
30 |     return new window.Worker(workerURL);
31 | };
32 | ```
33 | 
34 | It will be up to bundler (browserify, webpack) to decide what to do. For example:
35 |  - mapbox can decide to continue to use Browserify + Webworkify and generate single file e.g. `require('../../source/worker.webworker');` will be transformed to `window.URL.createObjectURL(new WebWorkify(require('../../source/worker'), {bare: true}));` behind the scene.
36 |  - or in case of [react-map-gl](https://github.com/uber/react-map-gl) + CRA, webpack can be instructed to generate URLs
37 | 
38 | ## TODO
39 | 
40 | - How to instruct webpack to generate URLs for `require('*.webworker')` in node folder and generate corresponding files to web folder.
41 | - Change ESLint settings to suport `self` keyword in webworkers
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
 1 | // In production, we register a service worker to serve assets from local cache.
 2 | 
 3 | // This lets the app load faster on subsequent visits in production, and gives
 4 | // it offline capabilities. However, it also means that developers (and users)
 5 | // will only see deployed updates on the "N+1" visit to a page, since previously
 6 | // cached resources are updated in the background.
 7 | 
 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 9 | // This link also includes instructions on opting out of this behavior.
10 | 
11 | export default function register() {
12 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
13 |     window.addEventListener('load', () => {
14 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
15 |       navigator.serviceWorker
16 |         .register(swUrl)
17 |         .then(registration => {
18 |           registration.onupdatefound = () => {
19 |             const installingWorker = registration.installing;
20 |             installingWorker.onstatechange = () => {
21 |               if (installingWorker.state === 'installed') {
22 |                 if (navigator.serviceWorker.controller) {
23 |                   // At this point, the old content will have been purged and
24 |                   // the fresh content will have been added to the cache.
25 |                   // It's the perfect time to display a "New content is
26 |                   // available; please refresh." message in your web app.
27 |                   console.log('New content is available; please refresh.');
28 |                 } else {
29 |                   // At this point, everything has been precached.
30 |                   // It's the perfect time to display a
31 |                   // "Content is cached for offline use." message.
32 |                   console.log('Content is cached for offline use.');
33 |                 }
34 |               }
35 |             };
36 |           };
37 |         })
38 |         .catch(error => {
39 |           console.error('Error during service worker registration:', error);
40 |         });
41 |     });
42 |   }
43 | }
44 | 
45 | export function unregister() {
46 |   if ('serviceWorker' in navigator) {
47 |     navigator.serviceWorker.ready.then(registration => {
48 |       registration.unregister();
49 |     });
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webworker-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "react": "^15.5.4",
 7 |     "react-dom": "^15.5.4"
 8 |   },
 9 |   "devDependencies": {
10 |     "autoprefixer": "7.1.0",
11 |     "babel-core": "6.24.1",
12 |     "babel-eslint": "7.2.3",
13 |     "babel-jest": "20.0.3",
14 |     "babel-loader": "7.0.0",
15 |     "babel-preset-react-app": "^3.0.0",
16 |     "babel-runtime": "6.23.0",
17 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
18 |     "chalk": "1.1.3",
19 |     "css-loader": "0.28.1",
20 |     "dotenv": "4.0.0",
21 |     "eslint": "3.19.0",
22 |     "eslint-config-react-app": "^1.0.4",
23 |     "eslint-loader": "1.7.1",
24 |     "eslint-plugin-flowtype": "2.33.0",
25 |     "eslint-plugin-import": "2.2.0",
26 |     "eslint-plugin-jsx-a11y": "5.0.3",
27 |     "eslint-plugin-react": "7.0.1",
28 |     "extract-text-webpack-plugin": "2.1.0",
29 |     "file-loader": "0.11.1",
30 |     "fs-extra": "3.0.1",
31 |     "html-webpack-plugin": "2.28.0",
32 |     "jest": "20.0.3",
33 |     "object-assign": "4.1.1",
34 |     "postcss-flexbugs-fixes": "3.0.0",
35 |     "postcss-loader": "2.0.5",
36 |     "promise": "7.1.1",
37 |     "react-dev-utils": "^2.0.1",
38 |     "react-error-overlay": "^1.0.6",
39 |     "style-loader": "0.17.0",
40 |     "sw-precache-webpack-plugin": "0.9.1",
41 |     "url-loader": "0.5.8",
42 |     "webpack": "2.5.1",
43 |     "webpack-dev-server": "2.4.5",
44 |     "webpack-manifest-plugin": "1.1.0",
45 |     "whatwg-fetch": "2.0.3"
46 |   },
47 |   "scripts": {
48 |     "start": "node scripts/start.js",
49 |     "build": "node scripts/build.js",
50 |     "test": "node scripts/test.js --env=jsdom"
51 |   },
52 |   "jest": {
53 |     "collectCoverageFrom": [
54 |       "src/**/*.{js,jsx}"
55 |     ],
56 |     "setupFiles": [
57 |       "<rootDir>/config/polyfills.js"
58 |     ],
59 |     "testMatch": [
60 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
61 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
62 |     ],
63 |     "testEnvironment": "node",
64 |     "testURL": "http://localhost",
65 |     "transform": {
66 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
67 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
68 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
69 |     },
70 |     "transformIgnorePatterns": [
71 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
72 |     ],
73 |     "moduleNameMapper": {
74 |       "^react-native$": "react-native-web"
75 |     }
76 |   },
77 |   "babel": {
78 |     "presets": [
79 |       "react-app"
80 |     ]
81 |   },
82 |   "eslintConfig": {
83 |     "extends": "react-app"
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | const glob = require('glob');
 7 | 
 8 | // Make sure any symlinks in the project folder are resolved:
 9 | // https://github.com/facebookincubator/create-react-app/issues/637
10 | const appDirectory = fs.realpathSync(process.cwd());
11 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
12 | 
13 | const envPublicUrl = process.env.PUBLIC_URL;
14 | 
15 | function ensureSlash(path, needsSlash) {
16 |   const hasSlash = path.endsWith('/');
17 |   if (hasSlash && !needsSlash) {
18 |     return path.substr(path, path.length - 1);
19 |   } else if (!hasSlash && needsSlash) {
20 |     return `${path}/`;
21 |   } else {
22 |     return path;
23 |   }
24 | }
25 | 
26 | const getPublicUrl = appPackageJson =>
27 |   envPublicUrl || require(appPackageJson).homepage;
28 | 
29 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
30 | // "public path" at which the app is served.
31 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
32 | // single-page apps that may serve index.html for nested URLs like /todos/42.
33 | // We can't use a relative path in HTML because we don't want to load something
34 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
35 | function getServedPath(appPackageJson) {
36 |   const publicUrl = getPublicUrl(appPackageJson);
37 |   const servedUrl = envPublicUrl ||
38 |     (publicUrl ? url.parse(publicUrl).pathname : '/');
39 |   return ensureSlash(servedUrl, true);
40 | }
41 | 
42 | // config after eject: we're in ./config/
43 | module.exports = {
44 |   dotenv: resolveApp('.env'),
45 |   appBuild: resolveApp('build'),
46 |   appPublic: resolveApp('public'),
47 |   appHtml: resolveApp('public/index.html'),
48 |   appIndexJs: resolveApp('src/index.js'),
49 |   appPackageJson: resolveApp('package.json'),
50 |   appSrc: resolveApp('src'),
51 |   yarnLockFile: resolveApp('yarn.lock'),
52 |   testsSetup: resolveApp('src/setupTests.js'),
53 |   appNodeModules: resolveApp('node_modules'),
54 |   publicUrl: getPublicUrl(resolveApp('package.json')),
55 |   servedPath: getServedPath(resolveApp('package.json')),
56 |   // Webpack uses `publicPath` to determine where the app is being served from.
57 |   // In development, we always serve from the root. This makes config easier.
58 |   publicPath: '/',
59 |   webworkerPaths: function() {
60 |     return glob.sync(resolveApp('src') + '**/*.webworker.js')
61 |       .map(path => [path.match(/\/([^\/]+\.webworker)\.js$/)[1], path] )
62 |       .reduce(function(result, item) {
63 |         result[item[0]] = item[1];
64 |         return result;
65 |       }, {});
66 |   }
67 | };
68 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Makes the script crash on unhandled rejections instead of silently
 4 | // ignoring them. In the future, promise rejections that are not handled will
 5 | // terminate the Node.js process with a non-zero exit code.
 6 | process.on('unhandledRejection', err => {
 7 |   throw err;
 8 | });
 9 | 
10 | process.env.NODE_ENV = 'development';
11 | 
12 | // Ensure environment variables are read.
13 | require('../config/env');
14 | 
15 | const fs = require('fs');
16 | const chalk = require('chalk');
17 | const webpack = require('webpack');
18 | const WebpackDevServer = require('webpack-dev-server');
19 | const clearConsole = require('react-dev-utils/clearConsole');
20 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
21 | const {
22 |   choosePort,
23 |   createCompiler,
24 |   prepareProxy,
25 |   prepareUrls,
26 | } = require('react-dev-utils/WebpackDevServerUtils');
27 | const openBrowser = require('react-dev-utils/openBrowser');
28 | const paths = require('../config/paths');
29 | const config = require('../config/webpack.config.dev');
30 | const createDevServerConfig = require('../config/webpackDevServer.config');
31 | 
32 | const useYarn = fs.existsSync(paths.yarnLockFile);
33 | const isInteractive = process.stdout.isTTY;
34 | 
35 | // Warn and crash if required files are missing
36 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
37 |   process.exit(1);
38 | }
39 | 
40 | // Tools like Cloud9 rely on this.
41 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
42 | const HOST = process.env.HOST || '0.0.0.0';
43 | 
44 | // We attempt to use the default port but if it is busy, we offer the user to
45 | // run on a different port. `detect()` Promise resolves to the next free port.
46 | choosePort(HOST, DEFAULT_PORT)
47 |   .then(port => {
48 |     if (port == null) {
49 |       // We have not found a port.
50 |       return;
51 |     }
52 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
53 |     const appName = require(paths.appPackageJson).name;
54 |     const urls = prepareUrls(protocol, HOST, port);
55 |     // Create a webpack compiler that is configured with custom messages.
56 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
57 |     // Load proxy config
58 |     const proxySetting = require(paths.appPackageJson).proxy;
59 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
60 |     // Serve webpack assets generated by the compiler over a web sever.
61 |     const serverConfig = createDevServerConfig(
62 |       proxyConfig,
63 |       urls.lanUrlForConfig
64 |     );
65 |     const devServer = new WebpackDevServer(compiler, serverConfig);
66 |     // Launch WebpackDevServer.
67 |     devServer.listen(port, HOST, err => {
68 |       if (err) {
69 |         return console.log(err);
70 |       }
71 |       if (isInteractive) {
72 |         clearConsole();
73 |       }
74 |       console.log(chalk.cyan('Starting the development server...\n'));
75 |       openBrowser(urls.localUrlForBrowser);
76 |     });
77 | 
78 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
79 |       process.on(sig, function() {
80 |         devServer.close();
81 |         process.exit();
82 |       });
83 |     });
84 |   })
85 |   .catch(err => {
86 |     if (err && err.message) {
87 |       console.log(err.message);
88 |     }
89 |     process.exit(1);
90 |   });
91 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce(
82 |       (env, key) => {
83 |         env[key] = JSON.stringify(raw[key]);
84 |         return env;
85 |       },
86 |       {}
87 |     ),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.NODE_ENV = 'production';
  5 | 
  6 | // Makes the script crash on unhandled rejections instead of silently
  7 | // ignoring them. In the future, promise rejections that are not handled will
  8 | // terminate the Node.js process with a non-zero exit code.
  9 | process.on('unhandledRejection', err => {
 10 |   throw err;
 11 | });
 12 | 
 13 | // Ensure environment variables are read.
 14 | require('../config/env');
 15 | 
 16 | const path = require('path');
 17 | const chalk = require('chalk');
 18 | const fs = require('fs-extra');
 19 | const webpack = require('webpack');
 20 | const config = require('../config/webpack.config.prod');
 21 | const paths = require('../config/paths');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 24 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 25 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 26 | 
 27 | const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 28 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 29 | const useYarn = fs.existsSync(paths.yarnLockFile);
 30 | 
 31 | // Warn and crash if required files are missing
 32 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 33 |   process.exit(1);
 34 | }
 35 | 
 36 | // First, read the current file sizes in build directory.
 37 | // This lets us display how much they changed later.
 38 | measureFileSizesBeforeBuild(paths.appBuild)
 39 |   .then(previousFileSizes => {
 40 |     // Remove all content but keep the directory so that
 41 |     // if you're in it, you don't end up in Trash
 42 |     fs.emptyDirSync(paths.appBuild);
 43 |     // Merge with the public folder
 44 |     copyPublicFolder();
 45 |     // Start the webpack build
 46 |     return build(previousFileSizes);
 47 |   })
 48 |   .then(
 49 |     ({ stats, previousFileSizes, warnings }) => {
 50 |       if (warnings.length) {
 51 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 52 |         console.log(warnings.join('\n\n'));
 53 |         console.log(
 54 |           '\nSearch for the ' +
 55 |             chalk.underline(chalk.yellow('keywords')) +
 56 |             ' to learn more about each warning.'
 57 |         );
 58 |         console.log(
 59 |           'To ignore, add ' +
 60 |             chalk.cyan('// eslint-disable-next-line') +
 61 |             ' to the line before.\n'
 62 |         );
 63 |       } else {
 64 |         console.log(chalk.green('Compiled successfully.\n'));
 65 |       }
 66 | 
 67 |       console.log('File sizes after gzip:\n');
 68 |       printFileSizesAfterBuild(stats, previousFileSizes);
 69 |       console.log();
 70 | 
 71 |       const appPackage = require(paths.appPackageJson);
 72 |       const publicUrl = paths.publicUrl;
 73 |       const publicPath = config.output.publicPath;
 74 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 75 |       printHostingInstructions(
 76 |         appPackage,
 77 |         publicUrl,
 78 |         publicPath,
 79 |         buildFolder,
 80 |         useYarn
 81 |       );
 82 |     },
 83 |     err => {
 84 |       console.log(chalk.red('Failed to compile.\n'));
 85 |       console.log((err.message || err) + '\n');
 86 |       process.exit(1);
 87 |     }
 88 |   );
 89 | 
 90 | // Create the production build and print the deployment instructions.
 91 | function build(previousFileSizes) {
 92 |   console.log('Creating an optimized production build...');
 93 | 
 94 |   let compiler = webpack(config);
 95 |   return new Promise((resolve, reject) => {
 96 |     compiler.run((err, stats) => {
 97 |       if (err) {
 98 |         return reject(err);
 99 |       }
100 |       const messages = formatWebpackMessages(stats.toJson({}, true));
101 |       if (messages.errors.length) {
102 |         return reject(new Error(messages.errors.join('\n\n')));
103 |       }
104 |       if (process.env.CI && messages.warnings.length) {
105 |         console.log(
106 |           chalk.yellow(
107 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
108 |               'Most CI servers set it automatically.\n'
109 |           )
110 |         );
111 |         return reject(new Error(messages.warnings.join('\n\n')));
112 |       }
113 |       return resolve({
114 |         stats,
115 |         previousFileSizes,
116 |         warnings: messages.warnings,
117 |       });
118 |     });
119 |   });
120 | }
121 | 
122 | function copyPublicFolder() {
123 |   fs.copySync(paths.appPublic, paths.appBuild, {
124 |     dereference: true,
125 |     filter: file => file !== paths.appHtml,
126 |   });
127 | }
128 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-error-overlay/middleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const paths = require('./paths');
 6 | 
 7 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 8 | const host = process.env.HOST || '0.0.0.0';
 9 | 
10 | module.exports = function(proxy, allowedHost) {
11 |   return {
12 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
13 |     // websites from potentially accessing local content through DNS rebinding:
14 |     // https://github.com/webpack/webpack-dev-server/issues/887
15 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
16 |     // However, it made several existing use cases such as development in cloud
17 |     // environment or subdomains in development significantly more complicated:
18 |     // https://github.com/facebookincubator/create-react-app/issues/2271
19 |     // https://github.com/facebookincubator/create-react-app/issues/2233
20 |     // While we're investigating better solutions, for now we will take a
21 |     // compromise. Since our WDS configuration only serves files in the `public`
22 |     // folder we won't consider accessing them a vulnerability. However, if you
23 |     // use the `proxy` feature, it gets more dangerous because it can expose
24 |     // remote code execution vulnerabilities in backends like Django and Rails.
25 |     // So we will disable the host check normally, but enable it if you have
26 |     // specified the `proxy` setting. Finally, we let you override it if you
27 |     // really know what you're doing with a special environment variable.
28 |     disableHostCheck: !proxy ||
29 |       process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
30 |     // Enable gzip compression of generated files.
31 |     compress: true,
32 |     // Silence WebpackDevServer's own logs since they're generally not useful.
33 |     // It will still show compile warnings and errors with this setting.
34 |     clientLogLevel: 'none',
35 |     // By default WebpackDevServer serves physical files from current directory
36 |     // in addition to all the virtual build products that it serves from memory.
37 |     // This is confusing because those files won’t automatically be available in
38 |     // production build folder unless we copy them. However, copying the whole
39 |     // project directory is dangerous because we may expose sensitive files.
40 |     // Instead, we establish a convention that only files in `public` directory
41 |     // get served. Our build script will copy `public` into the `build` folder.
42 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
43 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
44 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
45 |     // Note that we only recommend to use `public` folder as an escape hatch
46 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
47 |     // for some reason broken when imported through Webpack. If you just want to
48 |     // use an image, put it in `src` and `import` it from JavaScript instead.
49 |     contentBase: paths.appPublic,
50 |     // By default files from `contentBase` will not trigger a page reload.
51 |     watchContentBase: true,
52 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
53 |     // for the WebpackDevServer client so it can learn when the files were
54 |     // updated. The WebpackDevServer client is included as an entry point
55 |     // in the Webpack development configuration. Note that only changes
56 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
57 |     hot: true,
58 |     // It is important to tell WebpackDevServer to use the same "root" path
59 |     // as we specified in the config. In development, we always serve from /.
60 |     publicPath: paths.publicPath,
61 |     // WebpackDevServer is noisy by default so we emit custom message instead
62 |     // by listening to the compiler events with `compiler.plugin` calls above.
63 |     quiet: true,
64 |     // Reportedly, this avoids CPU overload on some systems.
65 |     // https://github.com/facebookincubator/create-react-app/issues/293
66 |     watchOptions: {
67 |       ignored: /node_modules/,
68 |     },
69 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
70 |     https: protocol === 'https',
71 |     host: host,
72 |     overlay: false,
73 |     historyApiFallback: {
74 |       // Paths with dots should still use the history fallback.
75 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
76 |       disableDotRule: true,
77 |     },
78 |     public: allowedHost,
79 |     proxy,
80 |     setup(app) {
81 |       // This lets us open files from the runtime error overlay.
82 |       app.use(errorOverlayMiddleware());
83 |       // This service worker file is effectively a 'no-op' that will reset any
84 |       // previous service worker registered for the same host:port combination.
85 |       // We do this in development to avoid hitting the production cache if
86 |       // it used the same host and port.
87 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
88 |       app.use(noopServiceWorkerMiddleware());
89 |     },
90 |   };
91 | };
92 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | const publicUrl = '';
 19 | // Get environment variables to inject into our app.
 20 | const env = getClientEnvironment(publicUrl);
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | const webConfiguration = {
 26 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 27 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 28 |   devtool: 'cheap-module-source-map',
 29 |   // These are the "entry points" to our application.
 30 |   // This means they will be the "root" imports that are included in JS bundle.
 31 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 32 |   entry: [
 33 |     // Include an alternative client for WebpackDevServer. A client's job is to
 34 |     // connect to WebpackDevServer by a socket and get notified about changes.
 35 |     // When you save a file, the client will either apply hot updates (in case
 36 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 37 |     // make a syntax error, this client will display a syntax error overlay.
 38 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 39 |     // to bring better experience for Create React App users. You can replace
 40 |     // the line below with these two lines if you prefer the stock client:
 41 |     // require.resolve('webpack-dev-server/client') + '?/',
 42 |     // require.resolve('webpack/hot/dev-server'),
 43 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 44 |     // We ship a few polyfills by default:
 45 |     require.resolve('./polyfills'),
 46 |     // Errors should be considered fatal in development
 47 |     require.resolve('react-error-overlay'),
 48 |     // Finally, this is your app's code:
 49 |     paths.appIndexJs,
 50 |     // We include the app code last so that if there is a runtime error during
 51 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 52 |     // changing JS code would still trigger a refresh.
 53 |   ],
 54 |   output: {
 55 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 56 |     path: paths.appBuild,
 57 |     // Add /* filename */ comments to generated require()s in the output.
 58 |     pathinfo: true,
 59 |     // This does not produce a real file. It's just the virtual path that is
 60 |     // served by WebpackDevServer in development. This is the JS bundle
 61 |     // containing code from all our entry points, and the Webpack runtime.
 62 |     filename: 'static/js/bundle.js',
 63 |     // There are also additional JS chunk files if you use code splitting.
 64 |     chunkFilename: 'static/js/[name].chunk.js',
 65 |     // This is the URL that app is served from. We use "/" in development.
 66 |     publicPath: paths.publicPath,
 67 |     // Point sourcemap entries to original disk location
 68 |     devtoolModuleFilenameTemplate: info =>
 69 |       path.resolve(info.absoluteResourcePath),
 70 |   },
 71 |   resolve: {
 72 |     // This allows you to set a fallback for where Webpack should look for modules.
 73 |     // We placed these paths second because we want `node_modules` to "win"
 74 |     // if there are any conflicts. This matches Node resolution mechanism.
 75 |     // https://github.com/facebookincubator/create-react-app/issues/253
 76 |     modules: ['node_modules', paths.appNodeModules].concat(
 77 |       // It is guaranteed to exist because we tweak it in `env.js`
 78 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 79 |     ),
 80 |     // These are the reasonable defaults supported by the Node ecosystem.
 81 |     // We also include JSX as a common component filename extension to support
 82 |     // some tools, although we do not recommend using it, see:
 83 |     // https://github.com/facebookincubator/create-react-app/issues/290
 84 |     extensions: ['.js', '.json', '.jsx'],
 85 |     alias: {
 86 | 
 87 |       // Support React Native Web
 88 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 89 |       'react-native': 'react-native-web',
 90 |     },
 91 |     plugins: [
 92 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 93 |       // This often causes confusion because we only process files within src/ with babel.
 94 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 95 |       // please link the files into your node_modules/ and let module-resolution kick in.
 96 |       // Make sure your source files are compiled, as they will not be processed in any way.
 97 |       new ModuleScopePlugin(paths.appSrc),
 98 |     ],
 99 |   },
100 |   module: {
101 |     strictExportPresence: true,
102 |     rules: [
103 |       // TODO: Disable require.ensure as it's not a standard language feature.
104 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
105 |       // { parser: { requireEnsure: false } },
106 | 
107 |       // First, run the linter.
108 |       // It's important to do this before Babel processes the JS.
109 |       {
110 |         test: /\.(js|jsx)$/,
111 |         exclude: /\.webworker\.(js|jsx)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 | 
118 |             },
119 |             loader: require.resolve('eslint-loader'),
120 |           },
121 |         ],
122 |         include: paths.appSrc,
123 |       },
124 |       // ** ADDING/UPDATING LOADERS **
125 |       // The "file" loader handles all assets unless explicitly excluded.
126 |       // The `exclude` list *must* be updated with every change to loader extensions.
127 |       // When adding a new loader, you must add its `test`
128 |       // as a new entry in the `exclude` list for "file" loader.
129 | 
130 |       // "file" loader makes sure those assets get served by WebpackDevServer.
131 |       // When you `import` an asset, you get its (virtual) filename.
132 |       // In production, they would get copied to the `build` folder.
133 |       {
134 |         exclude: [
135 |           /\.html$/,
136 |           /\.(js|jsx)$/,
137 |           /\.css$/,
138 |           /\.json$/,
139 |           /\.bmp$/,
140 |           /\.gif$/,
141 |           /\.jpe?g$/,
142 |           /\.png$/,
143 |         ],
144 |         loader: require.resolve('file-loader'),
145 |         options: {
146 |           name: 'static/media/[name].[hash:8].[ext]',
147 |         },
148 |       },
149 |       // "url" loader works like "file" loader except that it embeds assets
150 |       // smaller than specified limit in bytes as data URLs to avoid requests.
151 |       // A missing `test` is equivalent to a match.
152 |       {
153 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
154 |         loader: require.resolve('url-loader'),
155 |         options: {
156 |           limit: 10000,
157 |           name: 'static/media/[name].[hash:8].[ext]',
158 |         },
159 |       },
160 |       // Process JS with Babel.
161 |       {
162 |         test: /\.(js|jsx)$/,
163 |         include: paths.appSrc,
164 |         loader: require.resolve('babel-loader'),
165 |         options: {
166 | 
167 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
168 |           // It enables caching results in ./node_modules/.cache/babel-loader/
169 |           // directory for faster rebuilds.
170 |           cacheDirectory: true,
171 |         },
172 |       },
173 |       {
174 |         // Return url of file for WebWorker
175 |         test: /\.webworker\.(js|jsx)$/,
176 |         loader: require.resolve('file-loader'),
177 |         options: {
178 |           emitFile: false,
179 |           // This should be the same as webWorkerConfiguration.output.filename
180 |           name: 'static/js/[name].js', //.[hash:8]
181 |         },
182 |       },
183 |       // "postcss" loader applies autoprefixer to our CSS.
184 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
185 |       // "style" loader turns CSS into JS modules that inject <style> tags.
186 |       // In production, we use a plugin to extract that CSS to a file, but
187 |       // in development "style" loader enables hot editing of CSS.
188 |       {
189 |         test: /\.css$/,
190 |         use: [
191 |           require.resolve('style-loader'),
192 |           {
193 |             loader: require.resolve('css-loader'),
194 |             options: {
195 |               importLoaders: 1,
196 |             },
197 |           },
198 |           {
199 |             loader: require.resolve('postcss-loader'),
200 |             options: {
201 |               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
202 |               plugins: () => [
203 |                 require('postcss-flexbugs-fixes'),
204 |                 autoprefixer({
205 |                   browsers: [
206 |                     '>1%',
207 |                     'last 4 versions',
208 |                     'Firefox ESR',
209 |                     'not ie < 9', // React doesn't support IE8 anyway
210 |                   ],
211 |                   flexbox: 'no-2009',
212 |                 }),
213 |               ],
214 |             },
215 |           },
216 |         ],
217 |       },
218 |       // ** STOP ** Are you adding a new loader?
219 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
220 |     ],
221 |   },
222 |   plugins: [
223 |     // Makes some environment variables available in index.html.
224 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
225 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
226 |     // In development, this will be an empty string.
227 |     new InterpolateHtmlPlugin(env.raw),
228 |     // Generates an `index.html` file with the <script> injected.
229 |     new HtmlWebpackPlugin({
230 |       inject: true,
231 |       template: paths.appHtml,
232 |     }),
233 |     // Makes some environment variables available to the JS code, for example:
234 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
235 |     new webpack.DefinePlugin(env.stringified),
236 |     // This is necessary to emit hot updates (currently CSS only):
237 |     new webpack.HotModuleReplacementPlugin(),
238 |     // Watcher doesn't work well if you mistype casing in a path so we use
239 |     // a plugin that prints an error when you attempt to do this.
240 |     // See https://github.com/facebookincubator/create-react-app/issues/240
241 |     new CaseSensitivePathsPlugin(),
242 |     // If you require a missing module and then `npm install` it, you still have
243 |     // to restart the development server for Webpack to discover it. This plugin
244 |     // makes the discovery automatic so you don't have to restart.
245 |     // See https://github.com/facebookincubator/create-react-app/issues/186
246 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
247 |     // Moment.js is an extremely popular library that bundles large locale files
248 |     // by default due to how Webpack interprets its code. This is a practical
249 |     // solution that requires the user to opt into importing specific locales.
250 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
251 |     // You can remove this if you don't use Moment.js:
252 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
253 |   ],
254 |   // Some libraries import Node modules but don't use them in the browser.
255 |   // Tell Webpack to provide empty mocks for them so importing them works.
256 |   node: {
257 |     fs: 'empty',
258 |     net: 'empty',
259 |     tls: 'empty',
260 |   },
261 |   // Turn off performance hints during development because we don't do any
262 |   // splitting or minification in interest of speed. These warnings become
263 |   // cumbersome.
264 |   performance: {
265 |     hints: false,
266 |   },
267 | };
268 | 
269 | // Webpack configuration to build webworker files
270 | // Take webConfiguration as base and modify required bits
271 | const webWorkerConfiguration = Object.assign({}, webConfiguration, {
272 |   target: 'webworker',
273 |   // Entry uses function which returns array of paths
274 |   entry: paths.webworkerPaths(),
275 |   module: {
276 |     strictExportPresence: false,
277 |     rules: [
278 |       // {
279 |       //   test: /\.(js|jsx)$/,
280 |       //   enforce: 'pre',
281 |       //   use: [
282 |       //     {
283 |       //       options: {
284 |       //         formatter: eslintFormatter,
285 | 
286 |       //       },
287 |       //       loader: require.resolve('eslint-loader'),
288 |       //     },
289 |       //   ],
290 |       //   include: paths.appSrc,
291 |       // },
292 |       // Process JS with Babel.
293 |       {
294 |         test: /\.(js|jsx)$/,
295 |         include: paths.appSrc,
296 |         loader: require.resolve('babel-loader'),
297 |         options: {
298 |           cacheDirectory: true,
299 |         },
300 |       },
301 |     ],
302 |   },
303 |   plugins: [
304 |     new webpack.DefinePlugin(env.stringified),
305 |     new webpack.HotModuleReplacementPlugin(),
306 |     new CaseSensitivePathsPlugin(),
307 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
308 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
309 |   ],
310 | });
311 | 
312 | webWorkerConfiguration.output = Object.assign({}, webWorkerConfiguration.output, {
313 |   filename: 'static/js/[name].js', // .[hash:8]
314 | });
315 | 
316 | module.exports = [webWorkerConfiguration, webConfiguration];
317 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 23 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 24 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 25 | const publicUrl = publicPath.slice(0, -1);
 26 | // Get environment variables to inject into our app.
 27 | const env = getClientEnvironment(publicUrl);
 28 | 
 29 | // Assert this just to be safe.
 30 | // Development builds of React are slow and not intended for production.
 31 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 32 |   throw new Error('Production builds must have NODE_ENV=production.');
 33 | }
 34 | 
 35 | // Note: defined here because it will be used more than once.
 36 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 37 | 
 38 | // ExtractTextPlugin expects the build output to be flat.
 39 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 40 | // However, our output is structured with css, js and media folders.
 41 | // To have this structure working with relative paths, we have to use custom options.
 42 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 43 |   ? // Making sure that the publicPath goes back to to build folder.
 44 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 45 |   : {};
 46 | 
 47 | // This is the production configuration.
 48 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 49 | // The development configuration is different and lives in a separate file.
 50 | module.exports = {
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   devtool: 'source-map',
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.relative(paths.appSrc, info.absoluteResourcePath),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     extensions: ['.js', '.json', '.jsx'],
 86 |     alias: {
 87 |       
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |     },
 92 |     plugins: [
 93 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 94 |       // This often causes confusion because we only process files within src/ with babel.
 95 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 96 |       // please link the files into your node_modules/ and let module-resolution kick in.
 97 |       // Make sure your source files are compiled, as they will not be processed in any way.
 98 |       new ModuleScopePlugin(paths.appSrc),
 99 |     ],
100 |   },
101 |   module: {
102 |     strictExportPresence: true,
103 |     rules: [
104 |       // TODO: Disable require.ensure as it's not a standard language feature.
105 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
106 |       // { parser: { requireEnsure: false } },
107 | 
108 |       // First, run the linter.
109 |       // It's important to do this before Babel processes the JS.
110 |       {
111 |         test: /\.(js|jsx)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 |               
118 |             },
119 |             loader: require.resolve('eslint-loader'),
120 |           },
121 |         ],
122 |         include: paths.appSrc,
123 |       },
124 |       // ** ADDING/UPDATING LOADERS **
125 |       // The "file" loader handles all assets unless explicitly excluded.
126 |       // The `exclude` list *must* be updated with every change to loader extensions.
127 |       // When adding a new loader, you must add its `test`
128 |       // as a new entry in the `exclude` list in the "file" loader.
129 | 
130 |       // "file" loader makes sure those assets end up in the `build` folder.
131 |       // When you `import` an asset, you get its filename.
132 |       {
133 |         exclude: [
134 |           /\.html$/,
135 |           /\.(js|jsx)$/,
136 |           /\.css$/,
137 |           /\.json$/,
138 |           /\.bmp$/,
139 |           /\.gif$/,
140 |           /\.jpe?g$/,
141 |           /\.png$/,
142 |         ],
143 |         loader: require.resolve('file-loader'),
144 |         options: {
145 |           name: 'static/media/[name].[hash:8].[ext]',
146 |         },
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
152 |         loader: require.resolve('url-loader'),
153 |         options: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]',
156 |         },
157 |       },
158 |       // Process JS with Babel.
159 |       {
160 |         test: /\.(js|jsx)$/,
161 |         include: paths.appSrc,
162 |         loader: require.resolve('babel-loader'),
163 |         
164 |       },
165 |       // The notation here is somewhat confusing.
166 |       // "postcss" loader applies autoprefixer to our CSS.
167 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
168 |       // "style" loader normally turns CSS into JS modules injecting <style>,
169 |       // but unlike in development configuration, we do something different.
170 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
171 |       // (second argument), then grabs the result CSS and puts it into a
172 |       // separate file in our build process. This way we actually ship
173 |       // a single CSS file in production instead of JS code injecting <style>
174 |       // tags. If you use code splitting, however, any async bundles will still
175 |       // use the "style" loader inside the async code so CSS from them won't be
176 |       // in the main CSS file.
177 |       {
178 |         test: /\.css$/,
179 |         loader: ExtractTextPlugin.extract(
180 |           Object.assign(
181 |             {
182 |               fallback: require.resolve('style-loader'),
183 |               use: [
184 |                 {
185 |                   loader: require.resolve('css-loader'),
186 |                   options: {
187 |                     importLoaders: 1,
188 |                     minimize: true,
189 |                     sourceMap: true,
190 |                   },
191 |                 },
192 |                 {
193 |                   loader: require.resolve('postcss-loader'),
194 |                   options: {
195 |                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
196 |                     plugins: () => [
197 |                       require('postcss-flexbugs-fixes'),
198 |                       autoprefixer({
199 |                         browsers: [
200 |                           '>1%',
201 |                           'last 4 versions',
202 |                           'Firefox ESR',
203 |                           'not ie < 9', // React doesn't support IE8 anyway
204 |                         ],
205 |                         flexbox: 'no-2009',
206 |                       }),
207 |                     ],
208 |                   },
209 |                 },
210 |               ],
211 |             },
212 |             extractTextPluginOptions
213 |           )
214 |         ),
215 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
216 |       },
217 |       // ** STOP ** Are you adding a new loader?
218 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
219 |     ],
220 |   },
221 |   plugins: [
222 |     // Makes some environment variables available in index.html.
223 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
224 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
225 |     // In production, it will be an empty string unless you specify "homepage"
226 |     // in `package.json`, in which case it will be the pathname of that URL.
227 |     new InterpolateHtmlPlugin(env.raw),
228 |     // Generates an `index.html` file with the <script> injected.
229 |     new HtmlWebpackPlugin({
230 |       inject: true,
231 |       template: paths.appHtml,
232 |       minify: {
233 |         removeComments: true,
234 |         collapseWhitespace: true,
235 |         removeRedundantAttributes: true,
236 |         useShortDoctype: true,
237 |         removeEmptyAttributes: true,
238 |         removeStyleLinkTypeAttributes: true,
239 |         keepClosingSlash: true,
240 |         minifyJS: true,
241 |         minifyCSS: true,
242 |         minifyURLs: true,
243 |       },
244 |     }),
245 |     // Makes some environment variables available to the JS code, for example:
246 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
247 |     // It is absolutely essential that NODE_ENV was set to production here.
248 |     // Otherwise React will be compiled in the very slow development mode.
249 |     new webpack.DefinePlugin(env.stringified),
250 |     // Minify the code.
251 |     new webpack.optimize.UglifyJsPlugin({
252 |       compress: {
253 |         warnings: false,
254 |         // This feature has been reported as buggy a few times, such as:
255 |         // https://github.com/mishoo/UglifyJS2/issues/1964
256 |         // We'll wait with enabling it by default until it is more solid.
257 |         reduce_vars: false,
258 |       },
259 |       output: {
260 |         comments: false,
261 |       },
262 |       sourceMap: true,
263 |     }),
264 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
265 |     new ExtractTextPlugin({
266 |       filename: cssFilename,
267 |     }),
268 |     // Generate a manifest file which contains a mapping of all asset filenames
269 |     // to their corresponding output file so that tools can pick it up without
270 |     // having to parse `index.html`.
271 |     new ManifestPlugin({
272 |       fileName: 'asset-manifest.json',
273 |     }),
274 |     // Generate a service worker script that will precache, and keep up to date,
275 |     // the HTML & assets that are part of the Webpack build.
276 |     new SWPrecacheWebpackPlugin({
277 |       // By default, a cache-busting query parameter is appended to requests
278 |       // used to populate the caches, to ensure the responses are fresh.
279 |       // If a URL is already hashed by Webpack, then there is no concern
280 |       // about it being stale, and the cache-busting can be skipped.
281 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
282 |       filename: 'service-worker.js',
283 |       logger(message) {
284 |         if (message.indexOf('Total precache size is') === 0) {
285 |           // This message occurs for every build and is a bit too noisy.
286 |           return;
287 |         }
288 |         console.log(message);
289 |       },
290 |       minify: true,
291 |       // For unknown URLs, fallback to the index page
292 |       navigateFallback: publicUrl + '/index.html',
293 |       // Ignores URLs starting from /__ (useful for Firebase):
294 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
295 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
296 |       // Don't precache sourcemaps (they're large) and build asset manifest:
297 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
298 |       // Work around Windows path issue in SWPrecacheWebpackPlugin:
299 |       // https://github.com/facebookincubator/create-react-app/issues/2235
300 |       stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/',
301 |     }),
302 |     // Moment.js is an extremely popular library that bundles large locale files
303 |     // by default due to how Webpack interprets its code. This is a practical
304 |     // solution that requires the user to opt into importing specific locales.
305 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
306 |     // You can remove this if you don't use Moment.js:
307 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
308 |   ],
309 |   // Some libraries import Node modules but don't use them in the browser.
310 |   // Tell Webpack to provide empty mocks for them so importing them works.
311 |   node: {
312 |     fs: 'empty',
313 |     net: 'empty',
314 |     tls: 'empty',
315 |   },
316 | };
317 | 


--------------------------------------------------------------------------------