chore: add webpack 1 example

Author: matteocng

.babelrc

@@ -11,3 +11,5 @@ esproposal.export_star_as=enable
 [libs]
 ./node_modules/fbjs/flow/lib
 ./flow/decls
+[version]
+^0.47.0

.flowconfig

@@ -1,4 +1,10 @@
-Example project demonstrating the use of [React Flag Icon Css](//github.com/matteocng/react-flag-icon-css) with [React Css Modules](//github.com/gajus/react-css-modules), standard Css and custom flags. Powered by [Webpack 2](//github.com/webpack/webpack).
+Example project demonstrating the use of [React Flag Icon Css](//github.com/matteocng/react-flag-icon-css) with [React Css Modules](//github.com/gajus/react-css-modules) or standard (global) Css, and custom flags. Powered by [webpack 1](//github.com/webpack/webpack).
+
+### This is the `webpack` **1** example, [click here](https://github.com/matteocng/react-flag-icon-css-example-multi) if you are looking for the `webpack` **2** example.
+
+## Deprecation warning
+
+**webpack 1 is deprecated**, this branch is an example for existing apps that can't or won't be updated to `webpack 2`. We recommend upgrading to `webpack 2` ([official migration guide](https://webpack.js.org/guides/migrating/)) and then looking at the `react-flag-icon-css` [webpack 2 example](https://github.com/matteocng/react-flag-icon-css-example-multi) in the master branch.
 
 ## Installation
 
@@ -7,7 +13,8 @@ It is recommended to use [Yarn](https://yarnpkg.com/) instead of npm for managin
 Clone the repository:
 
 ```bash
-$ git clone https://github.com/matteocng/react-flag-icon-css-example-multi.git && cd react-flag-icon-css-example-multi
+$ git clone -b webpack-1 https://github.com/matteocng/react-flag-icon-css-example-multi.git
+$ cd react-flag-icon-css-example-multi
 
 ```
 
@@ -38,6 +45,15 @@ This example project uses the <code>USE_CSS_MODULES</code> environment variable
 
 In a real project you would probably choose to either go with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, removing the <code>USE_CSS_MODULES</code> switch and <code>getStylePropName</code>, replacing <code>[options.stylePropName]</code> in the React components with either <code>className</code> (standard Css) or <code>styleName</code> (modules).
 
+## Styles
+
+This example app uses `sass` (`.scss`) styles, but `sass` is not required to use `react-flag-icon-css`. Your app can use any CSS preprocessor (such as [`postcss`](https://github.com/postcss/postcss)) or no CSS preprocessor at all. For instance, to use [`postcss`](https://github.com/postcss/postcss) in your stylesheets:
+-   rename `.scss` files to `.css`.
+-   remove *`sass-loader`* from [webpack.config.js](webpack/webpack.config.js).
+-   `npm install` or `yarn add` the `PostCSS` plugins that you need.
+-   `import()` them into [webpack.config.js](webpack/webpack.config.js)
+-   add them to the `postcss` section after `autoprefixer`.
+
 ## Contributing
 
 Contributions are welcome. Please use a topic branch, follow the [AngularJS commit style guidelines](//github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines) and check that <code>yarn run pre-commit</code> returns zero errors before opening a PR. Thanks!

README.md

@@ -22,13 +22,13 @@
     "url": "git://github.com/matteocng/react-flag-icon-css-example-multi.git"
   },
   "scripts": {
-    "start": "USE_CSS_MODULES=true babel-node webpack/server.js",
-    "start:classes": "USE_CSS_MODULES=false babel-node webpack/server.js",
+    "start": "cross-env USE_CSS_MODULES=true NODE_ENV=development babel-node webpack/server.js",
+    "start:classes": "cross-env USE_CSS_MODULES=false NODE_ENV=development babel-node webpack/server.js",
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "lint": "npm run lint:js && npm run lint:css",
-    "lint:js": "eslint src cmrh.conf.js",
+    "lint:js": "eslint src webpack cmrh.conf.js",
     "lint:css": "sass-lint 'src/**/*.scss' -v -q",
-    "lint:fix": "eslint src --fix",
+    "lint:fix": "eslint src webpack --fix",
     "pre-commit": "npm run lint && npm run flow"
   },
   "pre-commit": [
@@ -38,41 +38,46 @@
   ],
   "dependencies": {
     "node-sass": "^4.5.3",
+    "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-css-modules": "^4.0.5",
     "react-dom": "^15.5.4",
-    "react-flag-icon-css": "^1.0.16",
-    "webpack": "^2.5.1",
-    "webpack-dev-server": "^2.4.5"
+    "react-flag-icon-css": "^1.0.18",
+    "webpack": "^1.15.0",
+    "webpack-dev-server": "^1.16.5"
   },
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.21.0",
+    "autoprefixer": "^7.1.1",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
-    "babel-plugin-transform-object-rest-spread": "^6.20.2",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "css-loader": "^0.28.1",
+    "babel-preset-react-app": "^2.2.0",
+    "babel-runtime": "^6.23.0",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.3",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^13.0.0",
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-flowtype": "^2.29.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.8.0",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
-    "flow-bin": "^0.46.0",
-    "html-webpack-plugin": "^2.28.0",
+    "flow-bin": "^0.47.0",
+    "html-webpack-plugin": "^1.7.0",
     "json-loader": "^0.5.4",
-    "postcss-loader": "^2.0.5",
+    "postcss-loader": "^1.3.3",
     "pre-commit": "^1.2.2",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^6.0.5",
-    "style-loader": "^0.13.1",
-    "webpack": "^2.5.1",
-    "webpack-dev-server": "^2.4.5"
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.18.1",
+    "webpack-dev-server": "^1.16.5"
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

package.json

@@ -7,7 +7,7 @@ import type { AppPropsType } from '../types/flow'
 
 const appProps: AppPropsType = {
   headingText: 'React Flag Icon Css',
-  subHeadingText: `Webpack Example ${__USE_CSS_MODULES__ ? 'using CSS Modules' : 'with global CSS'}`
+  subHeadingText: `Webpack 1 Example ${__USE_CSS_MODULES__ ? 'using CSS Modules' : 'with global CSS'}`
 }
 
 const rootEL = document.querySelector('#app')

src/.babelrc

@@ -1,12 +1,11 @@
 import WebpackDevServer from 'webpack-dev-server'
 import webpack from 'webpack'
-import path from 'path'
+import webpackConfig, { outputPath } from './webpack.config'
 
-import configMaker, { outputPath } from './webpack.config.js'
 
+const configMaker = webpackConfig
 const config = configMaker()
-var compiler = webpack(config)
-
+const compiler = webpack(config)
 
 
 const server = new WebpackDevServer(compiler, {

src/js/index.js

@@ -4,10 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>{%= o.htmlWebpackPlugin.options.title %}</title>
   </head>
   <body>
-    <a href="<%= htmlWebpackPlugin.options.githubRepositoryUrl %>"><img style="position: absolute; top: 0; right: 0; border: 0; width: 70px;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
+    <a href="{%= o.htmlWebpackPlugin.options.githubRepositoryUrl %}">
+      <img style="position: absolute; top: 0; right: 0; border: 0; width: 70px;"   src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" />
+    </a>
     <div id="app"></div>
   </body>
 </html>

webpack/server.js

@@ -1,60 +1,56 @@
 import path from 'path'
 import webpack from 'webpack'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
-import autoprefixer from 'autoprefixer'
-
+import HtmlWebpackPlugin from 'html-webpack-plugin' // eslint-disable-line import/no-extraneous-dependencies
+import ExtractTextPlugin from 'extract-text-webpack-plugin'  // eslint-disable-line import/no-extraneous-dependencies
+import autoprefixer from 'autoprefixer' // eslint-disable-line import/no-extraneous-dependencies
 
 const port = 8080
 const JS_REGEX = /\.js$|\.jsx$|\.es6$|\.babel$/
 const CSS_REGEX = /\.css$|\.scss$/
 const context = path.join(__dirname, '../src/js')
 export const outputPath = 'www'
 
+const makeExtractTextLoader = ({ useCssModules }: { useCssModules: boolean }): string =>
+  ExtractTextPlugin.extract(
+    'style-loader!',
+    [`css-loader?importLoaders=1${useCssModules ? '&modules=2&localIdentName=[name]__[local]__[hash:base64:5]' : ''}`,
+      'postcss-loader',
+      'sass-loader'
+    ].join('!')
+  )
 
-const getRules = options => {
-  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
-
-  return [
-    {
-      test: JS_REGEX,
-      loaders: ['babel-loader'],
-      exclude: /node_modules/
-    },
-    {
-      test: CSS_REGEX,
-      loader: ExtractTextPlugin.extract({
-        fallback: "style-loader",
-        use: [
-          { loader: 'css-loader', query: {
-            modules: useCssModules,
-            importLoaders: useCssModules ? 2 : '',
-            localIdentName: useCssModules ? '[name]__[local]__[hash:base64:5]' : ''
-          } },
-          { loader: 'postcss-loader', options: {
-            plugins: [
-              autoprefixer({ browsers: ['last 4 versions'] }),
-            ],
-          } },
-          { loader: 'sass-loader', options: {} }
-        ]
-      }),
-    },
-    {
-      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: "file-loader"
-    },
-    {
-      test: /\.json$/,
-      loader: "json-loader"
+const getLoaders = (options: {}): {}[] => [
+  {
+    test: JS_REGEX,
+    exclude: /node_modules/,
+    loader: 'babel',
+    query: {
+        // This is a feature of `babel-loader` for webpack (not Babel itself).
+        // It enables caching results in ./node_modules/.cache/babel-loader/
+        // directory for faster rebuilds.
+      cacheDirectory: true
     }
- ]
-}
+  },
+  {
+    test: CSS_REGEX,
+    loader: makeExtractTextLoader(options),
+  },
+  {
+    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    loader: 'file-loader'
+  },
+  {
+    test: /\.json$/,
+    loader: 'json-loader'
+  },
+]
 
+const config = (options: {}): {} => {
+  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
+  const computedOptions = { useCssModules, ...options }
 
-const config = options => {
   return {
-    context: context,
+    context,
     entry: [
       `webpack-dev-server/client?http://0.0.0.0:${port}/`,
       path.join(context, 'index.js'),
@@ -64,11 +60,22 @@ const config = options => {
       filename: 'bundle.js',
       publicPath: '/',
     },
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty'
+    },
+    module: {
+      loaders: getLoaders(computedOptions),
+    },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NamedModulesPlugin(),
       new HtmlWebpackPlugin({
-        title: 'React Flag Icon Css - Webpack Example Multi',
+        inject: 'body',
+        title: 'React Flag Icon Css - Webpack 1 Example Multi',
         devServerScript: `http://0.0.0.0:${port}/webpack-dev-server.js`,
         template: path.join(__dirname, 'templates/index.ejs'),
         githubRepositoryUrl: 'https://github.com/matteocng/react-flag-icon-css'
@@ -78,13 +85,10 @@ const config = options => {
         __USE_CSS_MODULES__: JSON.stringify(JSON.parse(process.env.USE_CSS_MODULES || 'true'))
       })
     ],
-    node: {
-      fs: "empty"
-    },
-    module: {
-      rules: getRules(options)
-   }
- }
+    postcss: (): [] => ([
+      autoprefixer({ browsers: ['last 4 versions'] })
+    ])
+  }
 }
 
 export default config