Make things work with Webpack 2

bensmithett · May 8, 2017 · a30535e · a30535e
1 parent 02b9a82
commit a30535e
Show file tree

Hide file tree

Showing 6 changed files with 4,308 additions and 37 deletions.
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-4.1.2
+7.10.0
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,3 @@
 language: node_js
 node_js:
-  - "4.1"
-  - "4.0"
-  - "0.12"
+  - "7.10"
diff --git a/README.md b/README.md
@@ -11,8 +11,8 @@ Example repo showing how to automatically generate a CSS bundle from explicitly
 
 ## Running
 
-- `npm install`
-- `npm run build`
+- `yarn install` (or `npm install`)
+- `yarn run build` (or `npm run build`)
 - Take a look at the generated CSS in `build/`
 
 ## Contributing

diff --git a/package.json b/package.json
@@ -3,10 +3,6 @@
   "version": "3.0.0",
   "description": "Example repo showing a webpack CSS build",
   "main": "src/index.js",
-  "engines": {
-    "node": "4.1.2",
-    "npm": "3.3.9"
-  },
   "scripts": {
     "build": "webpack",
     "lint": "standard",
@@ -23,22 +19,22 @@
   },
   "homepage": "https://github.com/bensmithett/webpack-css-example",
   "dependencies": {
-    "autoprefixer": "^6.3.6",
+    "autoprefixer": "^7.0.1",
     "babel-core": "^6.9.0",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.1.4",
-    "css-loader": "^0.26.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "css-loader": "^0.28.1",
+    "extract-text-webpack-plugin": "^2.1.0",
     "node-sass": "^4.1.0",
-    "postcss-loader": "^1.0.0",
+    "postcss-loader": "^2.0.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
-    "sass-loader": "^4.0.1",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.13.1"
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.17.0",
+    "webpack": "^2.5.1"
   },
   "devDependencies": {
-    "standard": "^8.2.0"
+    "standard": "^10.0.2"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,45 +2,62 @@ const autoprefixer = require('autoprefixer')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const path = require('path')
 
-const sassLoaders = [
-  'css-loader',
-  'postcss-loader',
-  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './src')
-]
+const loaders = {
+  css: {
+    loader: 'css-loader'
+  },
+  postcss: {
+    loader: 'postcss-loader',
+    options: {
+      plugins: (loader) => [
+        autoprefixer({
+          browsers: ['last 2 versions']
+        })
+      ]
+    }
+  },
+  sass: {
+    loader: 'sass-loader',
+    options: {
+      indentedSyntax: true,
+      includePaths: [path.resolve(__dirname, './src')]
+    }
+  }
+}
 
 const config = {
   entry: {
     app: ['./src/index']
   },
+
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loaders: ['babel-loader']
+        use: ['babel-loader']
       },
       {
         test: /\.sass$/,
-        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [loaders.css, loaders.postcss, loaders.sass]
+        })
       }
     ]
   },
+
   output: {
     filename: '[name].js',
     path: path.join(__dirname, './build'),
     publicPath: '/build'
   },
-  plugins: [
-    new ExtractTextPlugin('[name].css')
-  ],
-  postcss: [
-    autoprefixer({
-      browsers: ['last 2 versions']
-    })
-  ],
+
+  plugins: [new ExtractTextPlugin('[name].css')],
+
   resolve: {
-    extensions: ['', '.js', '.sass'],
-    root: [path.join(__dirname, './src')]
+    extensions: ['.js', '.sass'],
+    modules: [path.join(__dirname, './src'), 'node_modules']
   }
 }