Fixes #3329 - Tweak webpack config to share CSS loaders for production builders. Updated production builds to use ExtractTextPlugin so styles are not built into JS.

2017-07-08 08:29:34 -06:00
parent 42efd8a60e
commit 63b2a9751c
9 changed files with 142 additions and 204 deletions
--- a/make-webpack-config.js
+++ b/make-webpack-config.js
@@ -1,11 +1,11 @@
-var path = require('path')
+var path = require("path")

-var webpack = require('webpack')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var deepExtend = require('deep-extend')
-const {gitDescribeSync} = require('git-describe');
+var webpack = require("webpack")
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var deepExtend = require("deep-extend")
+const {gitDescribeSync} = require("git-describe")

-var pkg = require('./package.json')
+var pkg = require("./package.json")

 let gitInfo

@@ -13,7 +13,7 @@ try {
  gitInfo = gitDescribeSync(__dirname)
 } catch(e) {
  gitInfo = {
-    hash: 'noGit',
+    hash: "noGit",
    dirty: false
  }
 }
@@ -21,21 +21,21 @@ try {
 var commonRules = [
  { test: /\.(js(x)?)(\?.*)?$/,
    use: [{
-      loader: 'babel-loader',
+      loader: "babel-loader",
      options: {
        retainLines: true
      }
    }],
-    include: [ path.join(__dirname, 'src') ]
+    include: [ path.join(__dirname, "src") ]
  },
  { test: /\.(txt|yaml)(\?.*)?$/,
-    loader: 'raw-loader' },
+    loader: "raw-loader" },
  { test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
-    loader: 'url-loader?limit=10000' },
+    loader: "url-loader?limit=10000" },
  { test: /\.(woff|woff2)(\?.*)?$/,
-    loader: 'url-loader?limit=100000' },
+    loader: "url-loader?limit=100000" },
  { test: /\.(ttf|eot)(\?.*)?$/,
-    loader: 'file-loader' }
+    loader: "file-loader" }
 ]

 module.exports = function(rules, options) {
@@ -54,13 +54,12 @@ module.exports = function(rules, options) {

  if( specialOptions.separateStylesheets ) {
    plugins.push(new ExtractTextPlugin({
-      filename: '[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''),
+      filename: "[name].css" + (specialOptions.longTermCaching ? "?[contenthash]" : ""),
      allChunks: true
    }))
  }

  if( specialOptions.minimize ) {
-
    plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
@@ -78,12 +77,11 @@ module.exports = function(rules, options) {

  plugins.push(
    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV:  specialOptions.minimize ? JSON.stringify('production') : null,
-        WEBPACK_INLINE_STYLES: !Boolean(specialOptions.separateStylesheets)
-
+      "process.env": {
+        NODE_ENV:  specialOptions.minimize ? JSON.stringify("production") : null,
+        WEBPACK_INLINE_STYLES: !specialOptions.separateStylesheets
      },
-      'buildInfo': JSON.stringify({
+      "buildInfo": JSON.stringify({
        PACKAGE_VERSION: (pkg.version),
        GIT_COMMIT: gitInfo.hash,
        GIT_DIRTY: gitInfo.dirty
@@ -92,21 +90,21 @@ module.exports = function(rules, options) {

  delete options._special

-  var completeConfig =  deepExtend({
+  var completeConfig = deepExtend({
    entry: {},

    output:  {
-      path: path.join(__dirname, 'dist'),
-      publicPath: '/',
-      filename: '[name].js',
-      chunkFilename: '[name].js'
+      path: path.join(__dirname, "dist"),
+      publicPath: "/",
+      filename: "[name].js",
+      chunkFilename: "[name].js"
    },

-    target: 'web',
+    target: "web",

    // yaml-js has a reference to `fs`, this is a workaround
    node: {
-      fs: 'empty'
+      fs: "empty"
    },

    module: {
@@ -114,17 +112,17 @@ module.exports = function(rules, options) {
    },

    resolveLoader: {
-      modules: [path.join(__dirname, 'node_modules')],
+      modules: [path.join(__dirname, "node_modules")],
    },

    externals: {
-      'buffertools': true // json-react-schema/deeper depends on buffertools, which fails.
+      "buffertools": true // json-react-schema/deeper depends on buffertools, which fails.
    },

    resolve: {
      modules: [
-        path.join(__dirname, './src'),
-        'node_modules'
+        path.join(__dirname, "./src"),
+        "node_modules"
      ],
      extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
      alias: {
@@ -132,7 +130,7 @@ module.exports = function(rules, options) {
      }
    },

-    devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
+    devtool: specialOptions.sourcemaps ? "cheap-module-source-map" : null,

    plugins,

--- a/webpack-dist-bundle.config.js
+++ b/webpack-dist-bundle.config.js
@@ -1,64 +1,33 @@
-var path = require('path')
-var rules = [
+const path = require("path")
+const styleRules = require("./webpack.dist-style.config.js")
+
+let rules = [
  { test: /\.(worker\.js)(\?.*)?$/,
    use: [
      {
-        loader: 'worker-loader',
+        loader: "worker-loader",
        options: {
          inline: true,
-          name: '[name].js'
+          name: "[name].js"
        }
      },
-      { loader: 'babel-loader' }
-    ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
-    ]
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: { sourceMap: true }
-      },
-      { loader: 'sass-loader',
-        options: {
-          outputStyle: 'expanded',
-          sourceMap: true,
-          sourceMapContents: 'true'
-        }
-      }
-    ]
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-      },
-      'less-loader'
+      { loader: "babel-loader" }
    ]
  }
 ]
+rules = rules.concat(styleRules)

-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
  _special: {
-    separateStylesheets: false,
+    separateStylesheets: true,
    minimize: true,
    sourcemaps: true,
  },

  entry: {
-    'swagger-ui-bundle': [
-      './src/polyfills',
-      './src/core/index.js'
+    "swagger-ui-bundle": [
+      "./src/polyfills",
+      "./src/core/index.js"
    ]
  },

--- a/webpack-dist-standalone.config.js
+++ b/webpack-dist-standalone.config.js
@@ -1,65 +1,33 @@
-var path = require('path')
+const path = require("path")
+const styleRules = require("./webpack.dist-style.config.js")

-var rules = [
+let rules = [
  { test: /\.(worker\.js)(\?.*)?$/,
    use: [
      {
-        loader: 'worker-loader',
+        loader: "worker-loader",
        options: {
          inline: true,
-          name: '[name].js'
+          name: "[name].js"
        }
      },
-      { loader: 'babel-loader' }
-    ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
-    ]
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: { sourceMap: true }
-      },
-      { loader: 'sass-loader',
-        options: {
-          outputStyle: 'expanded',
-          sourceMap: true,
-          sourceMapContents: 'true'
-        }
-      }
-    ]
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-      },
-      'less-loader'
+      { loader: "babel-loader" }
    ]
  }
 ]
+rules = rules.concat(styleRules)

-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
  _special: {
-    separateStylesheets: false,
+    separateStylesheets: true,
    minimize: true,
    sourcemaps: true,
  },

  entry: {
-    'swagger-ui-standalone-preset': [
-      './src/polyfills',
-      './src/standalone/index.js'
+    "swagger-ui-standalone-preset": [
+      "./src/polyfills",
+      "./src/standalone/index.js"
    ]
  },

--- a/webpack-dist.config.js
+++ b/webpack-dist.config.js
@@ -1,66 +1,25 @@
-var path = require('path')
-var fs = require('fs')
+const path = require("path")
+const fs = require("fs")
 const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const styleRules = require("./webpack.dist-style.config.js")

-var rules = [
+let rules = [
  { test: /\.(worker\.js)(\?.*)?$/,
    use: [
      {
-        loader: 'worker-loader',
+        loader: "worker-loader",
        options: {
          inline: true,
-          name: '[name].js'
+          name: "[name].js"
        }
      },
-      { loader: 'babel-loader' }
+      { loader: "babel-loader" }
    ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        'css-loader',
-        'postcss-loader'
-      ]
-    })
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        {
-          loader: 'css-loader',
-          options: { minimize: true }
-        },
-        {
-          loader: 'postcss-loader',
-          options: { sourceMap: true }
-        },
-        { loader: 'sass-loader',
-          options: {
-            outputStyle: 'expanded',
-            sourceMap: true,
-            sourceMapContents: 'true'
-          }
-        }
-      ]
-    })
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: ['css-loader',
-        {
-          loader: 'postcss-loader',
-        },
-        'less-loader'
-      ]
-    })
  }
 ]
+rules = rules.concat(styleRules)

-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
  _special: {
    separateStylesheets: true,
    minimize: true,
--- a/webpack-hot-dev-server.config.js
+++ b/webpack-hot-dev-server.config.js
@@ -1,55 +1,55 @@
-var path = require('path')
+const path = require("path")

-var rules = [
+const rules = [
  { test: /\.(worker\.js)(\?.*)?$/,
    use: [
      {
-        loader: 'worker-loader',
+        loader: "worker-loader",
        options: {
          inline: true
        }
      },
-      { loader: 'babel-loader' }
+      { loader: "babel-loader" }
    ]
  },
  { test: /\.(jsx)(\?.*)?$/,
    use: [
-      { loader: 'react-hot-loader' }, 
-      { loader: 'babel-loader' }
+      { loader: "react-hot-loader" }, 
+      { loader: "babel-loader" }
    ]
  },
  { test: /\.(css)(\?.*)?$/,
    use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
+      "style-loader",
+      "css-loader",
+      "postcss-loader"
    ]
  },
  { test: /\.(scss)(\?.*)?$/,
    use: [
-      'style-loader',
-      'css-loader',
+      "style-loader",
+      "css-loader",
      {
-        loader: 'postcss-loader',
+        loader: "postcss-loader",
        options: { sourceMap: true }
      },
-      { loader: 'sass-loader',
+      { loader: "sass-loader",
        options: {
-          outputStyle: 'expanded',
+          outputStyle: "expanded",
          sourceMap: true,
-          sourceMapContents: 'true'
+          sourceMapContents: "true"
        }
      }
    ]
  },
  { test: /\.(less)(\?.*)?$/,
    use: [
-      'style-loader',
-      'css-loader',
+      "style-loader",
+      "css-loader",
      {
-        loader: 'postcss-loader',
+        loader: "postcss-loader",
      },
-      'less-loader'
+      "less-loader"
    ]
  }
 ]
@@ -60,25 +60,25 @@ module.exports = require("./make-webpack-config")(rules, {
  },
 	devtool: "eval",
  entry: {
-    'swagger-ui-bundle': [
-      './src/polyfills',
-      './src/core/index.js'
+    "swagger-ui-bundle": [
+      "./src/polyfills",
+      "./src/core/index.js"
    ],
-    'swagger-ui-standalone-preset': [
-      './src/polyfills',
-      './src/standalone/index.js',
+    "swagger-ui-standalone-preset": [
+      "./src/polyfills",
+      "./src/standalone/index.js",
    ]
  },
  output: {
    pathinfo: true,
-    filename: '[name].js',
+    filename: "[name].js",
    library: "[name]",
    libraryTarget: "umd",
    chunkFilename: "[id].js"
  },
  devServer: {
    port: 3200,
-    contentBase: path.join(__dirname, 'dev-helpers'),
+    contentBase: path.join(__dirname, "dev-helpers"),
    publicPath: "/",
    noInfo: true,
    hot: true,
--- a/webpack-watch.config.js
+++ b/webpack-watch.config.js
@@ -1,3 +1,3 @@
-var config = require("./webpack-dist.config.js")
+const config = require("./webpack-dist.config.js")

 module.exports = config
--- a/webpack.check.js
+++ b/webpack.check.js
@@ -1,8 +1,7 @@
-const webpack = require('webpack')
-const path = require('path')
-const deepMerge = require('deepmerge')
-const webpackConfig = require('./webpack-dist-bundle.config.js')
-const DEPS_CHECK_DIR = require('./package.json').config.deps_check_dir
+const path = require("path")
+const deepMerge = require("deepmerge")
+const webpackConfig = require("./webpack-dist-bundle.config.js")
+const DEPS_CHECK_DIR = require("./package.json").config.deps_check_dir

 module.exports = deepMerge(
  webpackConfig, {
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,3 @@
 module.exports = require("./make-webpack-config")({

-});
+})
--- a/webpack.dist-style.config.js
+++ b/webpack.dist-style.config.js
@@ -0,0 +1,45 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = [{ 
+  test: /\.(css)(\?.*)?$/,
+  use: ExtractTextPlugin.extract({
+    fallback: "style-loader",
+    use: [
+      "css-loader",
+      "postcss-loader"
+    ]
+  })
+},
+{ test: /\.(scss)(\?.*)?$/,
+  use: ExtractTextPlugin.extract({
+    fallback: "style-loader",
+    use: [
+      {
+        loader: "css-loader",
+        options: { minimize: true }
+      },
+      {
+        loader: "postcss-loader",
+        options: { sourceMap: true }
+      },
+      { loader: "sass-loader",
+        options: {
+          outputStyle: "expanded",
+          sourceMap: true,
+          sourceMapContents: "true"
+        }
+      }
+    ]
+  })
+},
+{ test: /\.(less)(\?.*)?$/,
+  use: ExtractTextPlugin.extract({
+    fallback: "style-loader",
+    use: ["css-loader",
+      {
+        loader: "postcss-loader",
+      },
+      "less-loader"
+    ]
+  })
+}]