From 446b80b5c9d59b68acbdebb5455bd24c47274fd1 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Tue, 23 Jan 2018 12:22:29 +0200 Subject: [PATCH] prepare webpack config to preact --- web/package-lock.json | 84 ++++++++++++++++++++----------------------- web/package.json | 7 ++-- web/webpack.config.js | 75 ++++++++++++++++++-------------------- 3 files changed, 77 insertions(+), 89 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 6804148c..f5a3c2fa 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -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", diff --git a/web/package.json b/web/package.json index 61217c25..97723c47 100644 --- a/web/package.json +++ b/web/package.json @@ -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" } } diff --git a/web/webpack.config.js b/web/webpack.config.js index 70a2de1f..2077eee3 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -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: {