From 3f9341e3c896b709103fb057d51741846a4f9b9d Mon Sep 17 00:00:00 2001 From: Matt Wigdahl Date: Sat, 12 Nov 2016 16:46:43 -0600 Subject: [PATCH 1/4] Changes to support Webpack 2 --- .babelrc | 15 ++++++++++++++- .eslintrc | 4 ++-- package.json | 6 +++--- webpack.config.dev.js | 21 +++++++++++++++------ webpack.config.prod.js | 25 ++++++++++++++++--------- 5 files changed, 50 insertions(+), 21 deletions(-) diff --git a/.babelrc b/.babelrc index d59afb2fb..163604ea9 100644 --- a/.babelrc +++ b/.babelrc @@ -1,20 +1,33 @@ { "presets": [ - "latest", "react", "stage-1" ], "env": { "development": { "presets": [ + "latest", "react-hmre" ] }, "production": { + "presets": [ + ["latest", { + "es2015": { + "modules": false + } + }], + ], "plugins": [ "transform-react-constant-elements", "transform-react-remove-prop-types" ] + }, + "test": { + "presets": [ + "latest" + ] } } } + diff --git a/.eslintrc b/.eslintrc index a54a82555..d42e8d521 100755 --- a/.eslintrc +++ b/.eslintrc @@ -53,6 +53,7 @@ "react/jsx-sort-props": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, + "react/jsx-wrap-multilines": 1, "react/no-danger": 1, "react/no-did-mount-set-state": 1, "react/no-did-update-set-state": 1, @@ -65,8 +66,7 @@ "react/react-in-jsx-scope": 1, "react/require-extension": 1, "react/self-closing-comp": 1, - "react/sort-comp": 1, - "react/wrap-multilines": 1 + "react/sort-comp": 1 }, "globals": { } diff --git a/package.json b/package.json index 87c1702cd..734ccbb8c 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "remove-dist": "rimraf ./dist", "prebuild": "npm run clean-dist && npm run lint && npm run test", "build": "babel-node tools/build.js && npm run open:dist", - "test": "mocha tools/testSetup.js \"./{,!(node_modules)/**/}*.spec.js\" --reporter progress", + "test": "mocha tools/testSetup.js --compilers js:babel-core/register \"./{,!(node_modules)/**/}*.spec.js\" --reporter progress", "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"./{,!(node_modules)/**/}*.spec.js\" --reporter progress", "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"./{,!(node_modules)/**/}*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js", "test:watch": "npm run test -- --watch", @@ -66,7 +66,7 @@ "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", "eslint-watch": "2.1.14", - "extract-text-webpack-plugin": "1.0.1", + "extract-text-webpack-plugin": "2.0.0-beta.4", "file-loader": "0.9.0", "html-webpack-plugin": "2.24.0", "isparta": "4.0.0", @@ -88,7 +88,7 @@ "sinon-chai": "2.8.0", "style-loader": "0.13.1", "url-loader": "0.5.7", - "webpack": "1.13.2", + "webpack": "2.1.0-beta.25", "webpack-bundle-analyzer": "1.5.3", "webpack-dev-middleware": "1.8.4", "webpack-hot-middleware": "2.13.0", diff --git a/webpack.config.dev.js b/webpack.config.dev.js index edda9af23..61af56379 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -5,11 +5,9 @@ import path from 'path'; export default { resolve: { - extensions: ['', '.js', '.jsx', '.json'] + extensions: ['*', '.js', '.jsx', '.json'] }, - debug: true, devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool - noInfo: true, // set to false to see a list of every file being bundled. entry: [ // must be first entry to properly set public path './src/webpack-public-path', @@ -36,7 +34,19 @@ export default { collapseWhitespace: true }, inject: true - }) + }), + new webpack.LoaderOptionsPlugin({ + minimize: false, + debug: true, + noInfo: true, // set to false to see a list of every file being bundled. + options: { + sassLoader: { + includePaths: [path.resolve(__dirname, 'src', 'scss')] + }, + context: '/', + postcss: () => [autoprefixer], + } + }) ], module: { loaders: [ @@ -50,6 +60,5 @@ export default { {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}, {test: /\.json$/, loader: "json"} ] - }, - postcss: ()=> [autoprefixer] + } }; diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 88bb6a293..76881e4a6 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -14,11 +14,9 @@ const GLOBALS = { export default { resolve: { - extensions: ['', '.js', '.jsx', '.json'] + extensions: ['*', '.js', '.jsx', '.json'] }, - debug: true, devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool - noInfo: true, // set to false to see a list of every file being bundled. entry: path.resolve(__dirname, 'src/index'), target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test output: { @@ -30,9 +28,6 @@ export default { // Hash the files using MD5 so that their names change when the content changes. new WebpackMd5Hash(), - // Optimize the order that items are bundled. This assures the hash is deterministic. - new webpack.optimize.OccurenceOrderPlugin(), - // Tells React to build in prod mode. https://facebook.github.io/react/downloads.html new webpack.DefinePlugin(GLOBALS), @@ -64,7 +59,20 @@ export default { new webpack.optimize.DedupePlugin(), // Minify JS - new webpack.optimize.UglifyJsPlugin() + new webpack.optimize.UglifyJsPlugin(), + + new webpack.LoaderOptionsPlugin({ + minimize: true, + debug: false, + noInfo: true, // set to false to see a list of every file being bundled. + options: { + sassLoader: { + includePaths: [path.resolve(__dirname, 'src', 'scss')] + }, + context: '/', + postcss: () => [autoprefixer], + } + }) ], module: { loaders: [ @@ -78,6 +86,5 @@ export default { {test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract('css?sourceMap!postcss!sass?sourceMap')}, {test: /\.json$/, loader: "json"} ] - }, - postcss: ()=> [autoprefixer] + } }; From e86a822254a82e2f63ee2ad1a3b00052188ed418 Mon Sep 17 00:00:00 2001 From: Matt Wigdahl Date: Sat, 12 Nov 2016 17:07:05 -0600 Subject: [PATCH 2/4] Including suggested simplification for configureStore. --- src/store/configureStore.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 37208cb78..8449ce4e8 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -47,12 +47,6 @@ function configureStoreDev(initialState) { return store; } -let configureStore = function () {}; - -if (process.env.NODE_ENV === 'production') { - configureStore = configureStoreProd; -} else { - configureStore = configureStoreDev; -} +const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev; export default configureStore; \ No newline at end of file From 13e82c0977b939bf1c0402db42acd697457b03b7 Mon Sep 17 00:00:00 2001 From: Matt Wigdahl Date: Tue, 7 Feb 2017 18:41:52 -0600 Subject: [PATCH 3/4] updating code to support release version of Webpack2 --- .eslintrc | 3 +-- tools/testSetup.js | 2 -- webpack.config.dev.js | 19 +++++++++---------- webpack.config.prod.js | 20 ++++++++------------ 4 files changed, 18 insertions(+), 26 deletions(-) diff --git a/.eslintrc b/.eslintrc index a009c70ab..e55a17ed9 100755 --- a/.eslintrc +++ b/.eslintrc @@ -66,8 +66,7 @@ "react/react-in-jsx-scope": 1, "import/extensions": 1, "react/self-closing-comp": 1, - "react/sort-comp": 1, - "react/jsx-wrap-multilines": 1 + "react/sort-comp": 1 }, "globals": { } diff --git a/tools/testSetup.js b/tools/testSetup.js index c660fff45..9bd99b0cf 100644 --- a/tools/testSetup.js +++ b/tools/testSetup.js @@ -39,5 +39,3 @@ Object.keys(document.defaultView).forEach((property) => { global.navigator = { userAgent: 'node.js' }; - -documentRef = document; //eslint-disable-line no-undef diff --git a/webpack.config.dev.js b/webpack.config.dev.js index ec4dc3de8..caad048b1 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -26,7 +26,7 @@ export default { __DEV__: true }), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), + new webpack.NoEmitOnErrorsPlugin(), new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS. template: 'src/index.ejs', minify: { @@ -50,15 +50,14 @@ export default { ], module: { loaders: [ - {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']}, - {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, - {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, - {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, - {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, - {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, - {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, - {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}, - {test: /\.json$/, loader: "json"} + {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']}, + {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loder'}, + {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}, + {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'}, + {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}, + {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'}, + {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}, + {test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']} ] } }; diff --git a/webpack.config.prod.js b/webpack.config.prod.js index bde29c486..27f609162 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -55,9 +55,6 @@ export default { trackJSToken: '' }), - // Eliminate duplicate packages when generating bundle - new webpack.optimize.DedupePlugin(), - // Minify JS new webpack.optimize.UglifyJsPlugin(), @@ -76,15 +73,14 @@ export default { ], module: { loaders: [ - {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'}, - {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url?name=[name].[ext]'}, - {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff&name=[name].[ext]'}, - {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'}, - {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml&name=[name].[ext]'}, - {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, - {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, - {test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract('css?sourceMap!postcss!sass?sourceMap')}, - {test: /\.json$/, loader: "json"} + {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, + {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?name=[name].[ext]'}, + {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]'}, + {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'}, + {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name=[name].[ext]'}, + {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'}, + {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}, + {test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap!postcss-loader!sass-loader?sourceMap')} ] } }; From f26169c7d0c477155f9d1d82d6bb3528a73244f3 Mon Sep 17 00:00:00 2001 From: Matt Wigdahl Date: Tue, 7 Feb 2017 20:26:45 -0600 Subject: [PATCH 4/4] additional changes for Webpack2 --- webpack.config.dev.js | 4 ++-- webpack.config.prod.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/webpack.config.dev.js b/webpack.config.dev.js index caad048b1..43e9242bb 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -49,9 +49,9 @@ export default { }) ], module: { - loaders: [ + rules: [ {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']}, - {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loder'}, + {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'}, {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}, {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}, diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 27f609162..81251e839 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -56,7 +56,7 @@ export default { }), // Minify JS - new webpack.optimize.UglifyJsPlugin(), + new webpack.optimize.UglifyJsPlugin({ sourceMap: true }), new webpack.LoaderOptionsPlugin({ minimize: true, @@ -72,7 +72,7 @@ export default { }) ], module: { - loaders: [ + rules: [ {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?name=[name].[ext]'}, {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]'},