diff --git a/.eslintrc.js b/.eslintrc.js index bbbd858979..06f604901d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -182,7 +182,7 @@ module.exports = exports = { "object-curly-spacing": [ WARN, "always" ], "one-var": OFF, "operator-assignment": [ WARN, "never" ], - "operator-linebreak": [ WARN, "after" ], + "operator-linebreak": OFF, "padded-blocks": [ WARN, "never" ], "quote-props": [ WARN, "consistent-as-needed" ], "quotes": [ WARN, "single" ], diff --git a/config/webpack.base.config.js b/config/webpack.base.config.js index 8376e38d73..9d5c129f16 100644 --- a/config/webpack.base.config.js +++ b/config/webpack.base.config.js @@ -1,5 +1,5 @@ -let HtmlWebpackPlugin = require('html-webpack-plugin'); -let ExtractTextPlugin = require('extract-text-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const autoprefixer = require('autoprefixer'); module.exports = { entry: './src/client/index.js', @@ -11,20 +11,43 @@ module.exports = { use: { loader: 'babel-loader' } - }, { - test: /\.scss$/, - use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader!sass-loader' - })) - } + }, + { + test: /\.css$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + ], + }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/client/index.html', filename: './index.html' - }), - new ExtractTextPlugin('style.css') + }) ] }; diff --git a/config/webpack.prod.config.js b/config/webpack.prod.config.js index 11c0105a95..cc48bedd70 100644 --- a/config/webpack.prod.config.js +++ b/config/webpack.prod.config.js @@ -1,16 +1,76 @@ -let webpack = require('webpack'); -let merge = require('webpack-merge'); -let baseConfig = require('./webpack.base.config'); -let optConfig = require('./webpack.opt.config'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const autoprefixer = require('autoprefixer'); +const webpack = require('webpack'); +const merge = require('webpack-merge'); +const baseConfig = require('./webpack.base.config'); +const optConfig = require('./webpack.opt.config'); -function prodConfig(env) { - const NODE_ENV = env.NODE_ENV ? env.NODE_ENV : 'development'; - - return { - plugins: [ - new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) }) +const prodConfig = { + module: { + rules: [ + // The notation here is somewhat confusing. + // "postcss" loader applies autoprefixer to our CSS. + // "css" loader resolves paths in CSS and adds assets as dependencies. + // "style" loader normally turns CSS into JS modules injecting