Webpack now pulls .css (still not images, though)

JDRomano2 · May 17, 2017 · ad1dd4b · ad1dd4b
1 parent ffe0561
commit ad1dd4b
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 95 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,9 @@
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
 
+# Don't include built webpack modules
+index/dist/
+
 ## Much of this is uncecessary
 
 # Logs

diff --git a/index/dist/main-6b7cf07963d2f7e9ad74.min.js b/index/dist/main-6b7cf07963d2f7e9ad74.min.js
diff --git a/index/dist/main-7abf04b666dc70f3c3ec.min.js b/index/dist/main-7abf04b666dc70f3c3ec.min.js
diff --git a/index/dist/venomkb.html b/index/dist/venomkb.html
diff --git a/index/dist/webpack.stats.json b/index/dist/webpack.stats.json
diff --git a/package.json b/package.json
@@ -65,11 +65,13 @@
     "babel-core": "^6.8.0",
     "concurrently": "^3.4.0",
     "create-react-class": "^15.5.2",
+    "css-loader": "^0.25.0",
     "eslint": "^2.9.0",
     "eslint-loader": "^1.5.0",
     "eslint-plugin-react": "^5.0.1",
     "expect": "^1.20.2",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.16.1",
     "json-loader": "^0.5.4",
     "mocha": "^3.0.2",
@@ -83,7 +85,7 @@
     "rimraf": "^2.5.2",
     "sass-loader": "^3.2.0",
     "stats-webpack-plugin": "^0.3.1",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.13.2",
     "url-loader": "^0.5.7",
     "webpack": "^2.5.1",
     "webpack-dev-server": "^2.4.5"

diff --git a/venomkb.js b/venomkb.js
@@ -11,6 +11,8 @@ import Root from './index/containers/Root';
 // handle api calls from within app
 import { getProteinsIdx, getSpeciesIdx } from './index/helpers/api_fetch';
 
+import './index/styles/venomkb.css';
+
 getProteinsIdx().then((proteins) => {
     getSpeciesIdx().then((species) => {
         const store = configureStore({proteins, species});

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,7 +30,8 @@ module.exports = {
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('development')
-        })
+        }),
+        new ExtractTextPlugin('styles.css')
     ],
     module: {
         rules: [
@@ -48,37 +49,25 @@ module.exports = {
             {
                 test: /\.js?$/,
                 exclude: /node_modules/,
-                loader: 'babel-loader'
+                use: 'babel-loader'
             },
             {
                 test: /\.css$/,
-                use: [
-                    { loader: "style-loader" },
-                    { loader: "css-loader" }
-                ]
+                use: ExtractTextPlugin.extract({
+                    use: 'css-loader'
+                })
             },
             {
                 test: /\.scss$/,
-                use: [
-                    { loader: "style-loader" },
-                    { loader: "css-loader" },
-                    { loader: "sass-loader" }
-                ]
-            },
-            { 
-                test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, 
-                loader: 'url?limit=10000&mimetype=application/font-woff' 
-            },
-            { 
-                test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
-                loader: 'file' 
+                use: ExtractTextPlugin.extract({
+                    fallback: "style-loader",
+                    use: "css-loader!sass-loader",
+                })
             },
             {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                loaders: [
-                    'url?limit=8192',
-                    'img'
-                ]
+                test: /\.(jpe?g|png|gif|svg|ico)$/i,
+                exclude: /node_modules/,
+                use: "file-loader?name=/public/icons/[name].[ext]"
             }
         ]
     }