prepare webpack config to preact

2018-01-23 20:15:35 +02:00
parent 6912a622c7
commit 446b80b5c9
3 changed files with 77 additions and 89 deletions
@@ -390,6 +390,17 @@
        "babel-types": "6.26.0"
      }
    },
+    "babel-helper-builder-react-jsx": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz",
+      "integrity": "sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "babel-types": "6.26.0",
+        "esutils": "2.0.2"
+      }
+    },
    "babel-helper-call-delegate": {
      "version": "6.24.1",
      "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
@@ -557,6 +568,12 @@
      "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
      "dev": true
    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
    "babel-plugin-syntax-object-rest-spread": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -835,6 +852,17 @@
        "babel-runtime": "6.26.0"
      }
    },
+    "babel-plugin-transform-react-jsx": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz",
+      "integrity": "sha1-hAoCjn30YN/DotKfDA2R9jduZqM=",
+      "dev": true,
+      "requires": {
+        "babel-helper-builder-react-jsx": "6.26.0",
+        "babel-plugin-syntax-jsx": "6.18.0",
+        "babel-runtime": "6.26.0"
+      }
+    },
    "babel-plugin-transform-regenerator": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
@@ -1009,6 +1037,11 @@
        "tweetnacl": "0.14.5"
      }
    },
+    "bem-react-helper": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/bem-react-helper/-/bem-react-helper-1.1.2.tgz",
+      "integrity": "sha512-+QobHDglGxHkaTYbOJ4e5Iyev/QtjqgFecxFxANh7q8wDKIPclRiOkzrcvQ0qXVoJsKQz5iiaFH1JC14yOh4/Q=="
+    },
    "big.js": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@@ -1036,11 +1069,6 @@
      "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==",
      "dev": true
    },
-    "blueimp-tmpl": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/blueimp-tmpl/-/blueimp-tmpl-3.11.0.tgz",
-      "integrity": "sha512-+nzph90GQ7YzYdOJNLm1hHJrzWnWbxUGJyJVrLBD+q7HF6PIIjJVNrJCgLkFmNcNvJRKICvWuItL8NpH9Z8J5A=="
-    },
    "bn.js": {
      "version": "4.11.8",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -2855,19 +2883,6 @@
      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
      "dev": true
    },
-    "fs-extra": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
-      "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "jsonfile": "2.4.0",
-        "klaw": "1.3.1",
-        "path-is-absolute": "1.0.1",
-        "rimraf": "2.6.2"
-      }
-    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4715,15 +4730,6 @@
      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
      "dev": true
    },
-    "jsonfile": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-      "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11"
-      }
-    },
    "jsonpointer": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
@@ -4759,15 +4765,6 @@
        "is-buffer": "1.1.6"
      }
    },
-    "klaw": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
-      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11"
-      }
-    },
    "lazy-cache": {
      "version": "0.2.7",
      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
@@ -7841,6 +7838,11 @@
        }
      }
    },
+    "preact": {
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-8.2.7.tgz",
+      "integrity": "sha512-m34Ke8U32HyKRVzUOCAcaiIBLR2ye6syiuRclU5DxyixDPDFqdLbIElhERBrF6gDbPKQR+Vpv5bZ9CCbvN6pdQ=="
+    },
    "prepend-http": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -9551,16 +9553,6 @@
        }
      }
    },
-    "webpack-manifest-plugin": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz",
-      "integrity": "sha512-MX60Bv2G83Zks9pi3oLOmRgnPAnwrlMn+lftMrWBm199VQjk46/xgzBi9lPfpZldw2+EI2S+OevuLIaDuxCWRw==",
-      "dev": true,
-      "requires": {
-        "fs-extra": "0.30.0",
-        "lodash": "4.17.4"
-      }
-    },
    "webpack-sources": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
@@ -11,6 +11,7 @@
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.0",
@@ -25,13 +26,13 @@
    "sass-loader": "^6.0.4",
    "style-loader": "^0.19.1",
    "webpack": "^3.3.0",
-    "webpack-dev-server": "^2.7.1",
-    "webpack-manifest-plugin": "^1.3.2"
+    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.23.0",
-    "blueimp-tmpl": "^3.11.0",
+    "bem-react-helper": "^1.1.2",
+    "preact": "^8.2.7",
    "promise-polyfill": "^7.0.0"
  }
 }
@@ -1,36 +1,17 @@
 const fs = require('fs');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const CleanPlugin = require('clean-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const HtmlPlugin = require('html-webpack-plugin');
+
 const webpack = require('webpack');
+const ExtractText = require('extract-text-webpack-plugin');
+const Clean = require('clean-webpack-plugin');
+const Html = require('html-webpack-plugin');
+const Provide = webpack.ProvidePlugin;
+const Define = webpack.DefinePlugin;

 const publicFolder = path.resolve(__dirname, 'public');
 const env = process.env.NODE_ENV || 'dev';
 const hash = env === 'production' ? '.[chunkhash]' : '.[hash]';

-const extractCSS = new ExtractTextPlugin({
-  filename: `app${hash}.css`,
-  allChunks: true
-});
-const cleanPublic = new CleanPlugin(publicFolder);
-const uglifyJS = new webpack.optimize.UglifyJsPlugin();
-const ModuleConcatenation = new webpack.optimize.ModuleConcatenationPlugin();
-const Manifest = new ManifestPlugin();
-const Html = new HtmlPlugin({ template: path.resolve(__dirname, 'index.ejs') })
-
-const postcssLoader = {
-  loader: 'postcss-loader',
-  options: {
-    plugins: [
-      require('autoprefixer')({ browsers: ['> 1%'] }),
-      require('postcss-url')({ url: 'inline', maxSize: 5 }),
-      require('postcss-csso')
-    ]
-  }
-};
-
 module.exports = {
  context: __dirname,
  entry: {
@@ -42,12 +23,13 @@ module.exports = {
    filename: `app${hash}.js`
  },
  resolve: {
-    modules: [ path.resolve(__dirname), 'node_modules' ]
+    extensions: ['.jsx', '.js'],
+    modules: [path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules')]
  },
  module: {
    rules: [
      {
-        test: /\.js$/,
+        test: /\.jsx?$/,
        exclude: /(node_modules|\.vendor\.js$)/,
        use: {
          loader: 'babel-loader',
@@ -58,21 +40,26 @@ module.exports = {
                useBuiltIns: true,
              }],
            ],
-            plugins: ['transform-object-rest-spread'],
+            plugins: ['transform-object-rest-spread', ['transform-react-jsx', { 'pragma': 'h' }]],
          }
        }
      },
-      {
-        test: /\.css$/,
-        use: [ 'style-loader', 'css-loader', postcssLoader ]
-        // TODO: style-loader must be turned on only for dev; for build we need extractCSS
-      },
      {
        test: /\.scss$/,
        use: [
+          // TODO: style-loader must be turned on only for dev; for build we need extractCSS
          'style-loader',
          'css-loader',
-          postcssLoader,
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [
+                require('autoprefixer')({browsers: ['> 1%']}),
+                require('postcss-url')({url: 'inline', maxSize: 5}),
+                require('postcss-csso')
+              ]
+            }
+          },
          {
            loader: 'sass-loader',
            options: {
@@ -93,12 +80,20 @@ module.exports = {
    ]
  },
  plugins: [
-    cleanPublic,
-    Html, // we should add it only in dev
-    extractCSS,
-    // uglifyJS,
-    ModuleConcatenation,
-    Manifest,
+    new Clean(publicFolder),
+    new Provide({
+      b: 'bem-react-helper',
+    }),
+    new Define({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    }),
+    new Html({ template: path.resolve(__dirname, 'index.ejs') }), // we should add it only in dev
+    new ExtractText({
+      filename: `app${hash}.css`,
+      allChunks: true
+    }),
+    // new webpack.optimize.UglifyJsPlugin(), // TODO: enable it
+    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
  watch: env === 'dev',
  watchOptions: {