update to webpack 4, update dependencies, update node, fix some eslin…

…t warnings (#95) * update to webpack 4 * use node as test environment jestjs/jest#1909 * fix remaining eslint problems
shakacode · Jul 15, 2019 · 2e0afd9 · 2e0afd9
1 parent a2df9a3
commit 2e0afd9
Show file tree

Hide file tree

Showing 18 changed files with 10,834 additions and 2,550 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["@babel/preset-env"]
 }
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -7,5 +7,3 @@ globals:
 env:
   jest: true
 
-ecmaFeatures:
-  restParams: true
diff --git a/example/.babelrc b/example/.babelrc
@@ -1,8 +1,3 @@
 {
-  "presets": ["es2015", "react"],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
diff --git a/example/app/assets/styles/test.css b/example/app/assets/styles/test.css
@@ -0,0 +1,3 @@
+body {
+  font-size: 20px;
+}
diff --git a/example/app/layout/Layout.jsx b/example/app/layout/Layout.jsx
@@ -4,6 +4,7 @@ import Hero from '../components/Hero/Hero';
 import Content from '../components/Content/Content';
 
 import css from './Layout.scss';
+import '../assets/styles/test.css';
 
 export default class Layout extends React.Component {
 

diff --git a/example/app/markup/index.html b/example/app/markup/index.html
@@ -4,6 +4,7 @@
   <head>
     <title>sass-resources-loader example</title>
     <script src="/assets/app.js" defer></script>
+    <link type="text/css" rel="stylesheet" href="/assets/main.css"></link>
   </head>
 
   <body>

diff --git a/example/package.json b/example/package.json
@@ -3,11 +3,11 @@
   "version": "0.0.1",
   "description": "Example usage of sass-resources-loader and CSS Modules",
   "engines": {
-    "node": "5"
+    "node": ">=10"
   },
   "scripts": {
     "start": "nodemon --watch server.js server.js",
-    "build": "webpack --config webpack.prod.config.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
     "lint": "eslint --ext .js,.jsx ."
   },
   "authors": [
@@ -29,34 +29,33 @@
     "webpack"
   ],
   "dependencies": {
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6"
+    "cross-env": "^5.2.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.1",
-    "babel-cli": "^6.4.5",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^5.0.0-beta6",
-    "babel-loader": "^6.2.10",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-react-hmre": "^1.0.1",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.0.0",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
     "body-parser": "^1.14.2",
-    "css-loader": "^0.26.1",
-    "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^4.0.0",
-    "eslint-config-shakacode": "0.0.1",
-    "eslint-plugin-react": "^3.15.0",
+    "css-loader": "^3.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-shakacode": "17.0.0",
+    "eslint-plugin-react": "^7.13.0",
     "express": "^4.13.4",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
+    "extract-css-chunks-webpack-plugin": "^4.5.1",
     "node-sass": "^4.1.1",
     "nodemon": "^1.8.1",
-    "postcss-loader": "^1.2.1",
-    "sass-loader": "^4.1.1",
-    "sass-resources-loader": "file:../.",
-    "style-loader": "^0.13.1",
-    "webpack": "2.2.0",
-    "webpack-dev-middleware": "^1.9.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "sass-resources-loader": "file:..",
+    "style-loader": "^0.23.1",
+    "webpack": "4.34.0",
+    "webpack-dev-middleware": "^3.7.0",
     "webpack-hot-middleware": "^2.14.0"
   }
 }
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,7 +1,11 @@
 const webpack = require('webpack');
 const path = require('path');
 
+var production = process.env.NODE_ENV === 'production';
+const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
+
 module.exports = {
+  mode: production ? "production" : "development",
 
   entry: [
     'webpack-hot-middleware/client',
@@ -21,6 +25,12 @@ module.exports = {
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
+    new ExtractCssChunks(
+        {
+          filename: "[name].css",
+          chunkfilename: "[name].css",
+        }
+    ),
   ],
 
   module: {
@@ -31,15 +41,19 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.scss$/,
+        test: /\.(sass|scss|css)$/,
         use: [
-          'style-loader',
           {
+            loader: ExtractCssChunks.loader,
+            options: {
+              hot: production ? false : true,
+              modules: false,
+              reloadAll: true
+            }
+          }, {
             loader: 'css-loader',
             options: {
               modules: true,
-              importLoaders: 2,
-              localIdentName: '[path]__[local]__[hash:base64:5]',
             },
           },
           'postcss-loader',

diff --git a/example/webpack.prod.config.js b/example/webpack.prod.config.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
       <head>
         <title>sass-resources-loader example</title>
         <script src="/assets/app.js" defer></script>
+        <link type="text/css" rel="stylesheet" href="/assets/main.css"></link>
       </head>
       <body>
@@ Expand Down @@