step 2 - extract styles

bognix · Feb 27, 2017 · 0c67cda · 0c67cda
1 parent 254dc81
commit 0c67cda
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/example/index.html b/example/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Webpack Example</title>
+    <link rel="stylesheet" type="text/css" href="bundle.css">
 </head>
 <body>
 <script src="bundle.js"></script>

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "babel-loader": "^6.3.2",
     "babel-preset-es2015": "^6.22.0",
     "css-loader": "^0.26.2",
+    "extract-text-webpack-plugin": "^2.0.0",
     "style-loader": "^0.13.2",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1"

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,9 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+
+const extractStyles = new ExtractTextPlugin({
+    filename: 'bundle.css'
+});
+
 module.exports = {
     entry: [
         './example/index.js'
@@ -13,13 +19,12 @@ module.exports = {
             exclude: /node_modules/
         }, {
             test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader'
-          }, {
-            loader: 'css-loader'
-          }
-        ]}
+            use: extractStyles.extract({
+                use: 'css-loader'
+            })
+        }]
+    },
+    plugins: [
+        extractStyles
     ]
-    }
 };