From 9f0d3d6340a4907593ac4aa0b600a65611cf5606 Mon Sep 17 00:00:00 2001 From: Shankie Date: Fri, 26 Aug 2016 10:18:45 +0100 Subject: [PATCH 1/9] Adds ES2017 Babel presets --- package.json | 5 +++++ webpack.loaders.js | 24 +++++++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4acb0e1..9db3720 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,13 @@ "devDependencies": { "babel-core": "6.13.2", "babel-loader": "6.2.4", + "babel-plugin-transform-class-properties": "^6.11.5", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-runtime": "^6.12.0", "babel-preset-es2015": "6.13.2", + "babel-preset-es2017": "^6.14.0", "babel-preset-react": "6.11.1", + "babel-runtime": "^6.11.6", "css-loader": "0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "0.9.0", diff --git a/webpack.loaders.js b/webpack.loaders.js index 794c8c4..4c8e145 100644 --- a/webpack.loaders.js +++ b/webpack.loaders.js @@ -1,8 +1,30 @@ module.exports = [ + // { + // test: /\.jsx?$/, + // exclude: /(node_modules|bower_components)/, + // loaders: [ + // { + // loader: 'babel', + // query: { + // presets: ['es2015', 'es2017', 'react'], + // plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], + // }, + // }, + // ], + // }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, - loaders: ['react-hot', 'babel'], + loaders: ['react-hot'] + }, + { + test: /\.jsx?$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel', + query: { + presets: ['es2015', 'es2017', 'react'], + plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], + } }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, From 9c36cd06d789ae2b50da883e3cb30d68fcb9f8ba Mon Sep 17 00:00:00 2001 From: Shankie Date: Fri, 26 Aug 2016 10:36:53 +0100 Subject: [PATCH 2/9] Strips it down to just the transform --- package.json | 1 - webpack.loaders.js | 15 +-------------- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/package.json b/package.json index 9db3720..8f9c1a4 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.12.0", "babel-preset-es2015": "6.13.2", - "babel-preset-es2017": "^6.14.0", "babel-preset-react": "6.11.1", "babel-runtime": "^6.11.6", "css-loader": "0.23.1", diff --git a/webpack.loaders.js b/webpack.loaders.js index 4c8e145..9973202 100644 --- a/webpack.loaders.js +++ b/webpack.loaders.js @@ -1,17 +1,4 @@ module.exports = [ - // { - // test: /\.jsx?$/, - // exclude: /(node_modules|bower_components)/, - // loaders: [ - // { - // loader: 'babel', - // query: { - // presets: ['es2015', 'es2017', 'react'], - // plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], - // }, - // }, - // ], - // }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, @@ -22,7 +9,7 @@ module.exports = [ exclude: /(node_modules|bower_components)/, loader: 'babel', query: { - presets: ['es2015', 'es2017', 'react'], + presets: ['es2015', 'react'], plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], } }, From 3cd43a84a70bc909241f0d6c5d2f223e989f8098 Mon Sep 17 00:00:00 2001 From: Sarah Berman Date: Fri, 26 Aug 2016 12:27:28 -0400 Subject: [PATCH 3/9] update bootstrap to latest version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4acb0e1..4e5c9fe 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "license": "MIT", "homepage": "https://github.com/alicoding/react-webpack-babel#readme", "dependencies": { - "bootstrap": "3.3.7", + "bootstrap": "^4.0.0-alpha.3", "react": "15.3.0", "react-dom": "15.3.0" }, From 910fdc37397d08446809ed74316cdc219157da0e Mon Sep 17 00:00:00 2001 From: Dmitry Pavlov Date: Tue, 30 Aug 2016 16:55:21 +0300 Subject: [PATCH 4/9] exclude node_modules/bower_components folders --- webpack.loaders.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webpack.loaders.js b/webpack.loaders.js index 9973202..a8d82b3 100644 --- a/webpack.loaders.js +++ b/webpack.loaders.js @@ -15,30 +15,37 @@ module.exports = [ }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, + exclude: /(node_modules|bower_components)/, loader: "file" }, { test: /\.(woff|woff2)$/, + exclude: /(node_modules|bower_components)/, loader: "url?prefix=font/&limit=5000" }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, + exclude: /(node_modules|bower_components)/, loader: "url?limit=10000&mimetype=application/octet-stream" }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + exclude: /(node_modules|bower_components)/, loader: "url?limit=10000&mimetype=image/svg+xml" }, { test: /\.gif/, + exclude: /(node_modules|bower_components)/, loader: "url-loader?limit=10000&mimetype=image/gif" }, { test: /\.jpg/, + exclude: /(node_modules|bower_components)/, loader: "url-loader?limit=10000&mimetype=image/jpg" }, { test: /\.png/, + exclude: /(node_modules|bower_components)/, loader: "url-loader?limit=10000&mimetype=image/png" } ]; From c7ec4aba0d07cd5d92c750e2ff669d9270c150e1 Mon Sep 17 00:00:00 2001 From: Michael Knoch Date: Tue, 30 Aug 2016 21:41:53 +0200 Subject: [PATCH 5/9] install dependencies --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 74d3e73..56778a1 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "homepage": "https://github.com/alicoding/react-webpack-babel#readme", "dependencies": { "bootstrap": "^4.0.0-alpha.3", + "node-sass": "^3.8.0", "react": "15.3.0", - "react-dom": "15.3.0" + "react-dom": "15.3.0", + "sass-loader": "^4.0.0" }, "devDependencies": { "babel-core": "6.13.2", From 5328695b8a1c39efe4f05bfb213c57180fc9bdd8 Mon Sep 17 00:00:00 2001 From: Michael Knoch Date: Tue, 30 Aug 2016 21:42:09 +0200 Subject: [PATCH 6/9] configure webpack for loading sass --- webpack.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 95f22e3..dd617b7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,10 +17,11 @@ loaders.push({ }); // local css modules loaders.push({ - test: /[\/\\]src[\/\\].*\.css$/, + test: /[\/\\]src[\/\\].*\.scss/, loaders: [ 'style?sourceMap', - 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' + 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', + 'sass' ] }); From b8360aac9b5b26d04cd7dfd28966882775864162 Mon Sep 17 00:00:00 2001 From: Michael Knoch Date: Tue, 30 Aug 2016 21:42:20 +0200 Subject: [PATCH 7/9] modify example --- src/index.jsx | 2 +- src/{index.css => index.scss} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{index.css => index.scss} (100%) diff --git a/src/index.jsx b/src/index.jsx index b38d98f..56dc1eb 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,5 +1,5 @@ import 'bootstrap/dist/css/bootstrap.min.css'; -import styles from './index.css'; +import styles from './index.scss'; import React from 'react'; import { render } from 'react-dom'; diff --git a/src/index.css b/src/index.scss similarity index 100% rename from src/index.css rename to src/index.scss From f3c961a8482a4a37f507aee11500659df6cecac4 Mon Sep 17 00:00:00 2001 From: Michael Knoch Date: Tue, 30 Aug 2016 22:13:21 +0200 Subject: [PATCH 8/9] load sass when building production --- webpack.production.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.production.config.js b/webpack.production.config.js index 36c589f..cf33152 100644 --- a/webpack.production.config.js +++ b/webpack.production.config.js @@ -7,8 +7,8 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); // local css modules loaders.push({ - test: /[\/\\]src[\/\\].*\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') + test: /[\/\\]src[\/\\].*\.scss/, + loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass') }); // global css files loaders.push({ From cd8d3571ce1262bcaf4983500d3593e999df19f0 Mon Sep 17 00:00:00 2001 From: Michael Knoch Date: Tue, 30 Aug 2016 22:57:12 +0200 Subject: [PATCH 9/9] add loader for css again --- webpack.config.js | 11 ++++++++++- webpack.production.config.js | 6 ++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index dd617b7..c73c415 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,7 +15,7 @@ loaders.push({ 'css' ] }); -// local css modules +// local scss modules loaders.push({ test: /[\/\\]src[\/\\].*\.scss/, loaders: [ @@ -25,6 +25,15 @@ loaders.push({ ] }); +// local css modules +loaders.push({ + test: /[\/\\]src[\/\\].*\.css/, + loaders: [ + 'style?sourceMap', + 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' + ] +}); + module.exports = { entry: [ `webpack-dev-server/client?http://${HOST}:${PORT}`, diff --git a/webpack.production.config.js b/webpack.production.config.js index cf33152..645c9e1 100644 --- a/webpack.production.config.js +++ b/webpack.production.config.js @@ -6,6 +6,12 @@ var HtmlWebpackPlugin = require('html-webpack-plugin'); var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); // local css modules +loaders.push({ + test: /[\/\\]src[\/\\].*\.css/, + loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') +}); + +// local scss modules loaders.push({ test: /[\/\\]src[\/\\].*\.scss/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')