Split CSS away from the main bundle

lucapette · Feb 17, 2017 · 233eaec · 233eaec
1 parent e18700f
commit 233eaec
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "css-loader": "^0.26.1",
+    "extract-text-webpack-plugin": "beta",
     "flow-bin": "^0.38.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",

diff --git a/public/index.html b/public/index.html
@@ -2,9 +2,8 @@
   <head>
   </head>
   <body>
-    <div id="root">
-      <!-- This div's content will be managed by React. Hopefully. -->
-    </div>
+    <div id="root"></div>
     <script src="/App.js"  type="text/javascript"></script>
+    <link rel="stylesheet" href="/styles.css"  type="text/css"/>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,7 @@
-var path = require("path");
-var webpack = require("webpack");
+const path = require("path");
+const webpack = require("webpack");
+
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 const config = {
   devtool: "#source-maps",
@@ -21,7 +23,10 @@ const config = {
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: "css-loader"
+        })
       },
       {
         test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
@@ -32,7 +37,8 @@ const config = {
   plugins: [
     new webpack.ProvidePlugin({
       'jQuery': 'jquery'
-    })
+    }),
+    new ExtractTextPlugin('styles.css'),
   ],
   devServer: {
     contentBase: path.join(__dirname, "public")

diff --git a/yarn.lock b/yarn.lock
@@ -27,7 +27,7 @@ ajv-keywords@^1.1.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
-ajv@^4.7.0:
+ajv@^4.11.2, ajv@^4.7.0:
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.3.tgz#ce30bdb90d1254f762c75af915fb3a63e7183d22"
   dependencies:
@@ -1425,6 +1425,15 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
+extract-text-webpack-plugin@beta:
+  version "2.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0-rc.3.tgz#7381aa7869ce26d4b39a7bab71cf09e5a38432b2"
+  dependencies:
+    ajv "^4.11.2"
+    async "^2.1.2"
+    loader-utils "^0.2.16"
+    webpack-sources "^0.1.0"
+
 extsprintf@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
@@ -3540,7 +3549,7 @@ webpack-dev-server@2:
     webpack-dev-middleware "^1.9.0"
     yargs "^6.0.0"
 
-webpack-sources@^0.1.4:
+webpack-sources@^0.1.0, webpack-sources@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.4.tgz#ccc2c817e08e5fa393239412690bb481821393cd"
   dependencies: