chore: update defaults

.editorconfig

@@ -9,5 +9,4 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
-insert_final_newline = true
 trim_trailing_whitespace = false

.github/workflows/nodejs.yml

@@ -55,13 +55,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        # css-loader doesn't support node@6
-        node-version: [8.x, 10.x, 12.x, 14.x]
+        node-version: [10.x, 12.x, 14.x]
         webpack-version: [latest, next]
-        exclude:
-          # Webpack 5 does not support node 6 and 8
-          - node-version: 8.x
-            webpack-version: next
 
     runs-on: ${{ matrix.os }}
 
@@ -86,7 +81,7 @@ jobs:
         run: npm i -g npm
 
       - name: Install dependencies
-        run: npm i
+        run: npm ci
 
       - name: Install webpack ${{ matrix.webpack-version }}
         run: npm i webpack@${{ matrix.webpack-version }}

README.md

@@ -218,7 +218,6 @@ module.exports = {
               // you can specify a publicPath here
               // by default it uses publicPath in webpackOptions.output
               publicPath: '../',
-              hmr: process.env.NODE_ENV === 'development',
             },
           },
           'css-loader',
@@ -280,29 +279,32 @@ Here is an example to have both HMR in `development` and your styles extracted i
 **webpack.config.js**
 
 ```js
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production';
 
+const plugins = [
+  new MiniCssExtractPlugin({
+    // Options similar to the same options in webpackOptions.output
+    // both options are optional
+    filename: devMode ? '[name].css' : '[name].[hash].css',
+    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+  }),
+];
+
+if (devMode) {
+  // only enable hot in development
+  plugins.push(new webpack.HotModuleReplacementPlugin());
+}
+
 module.exports = {
-  plugins: [
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: devMode ? '[name].css' : '[name].[hash].css',
-      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-    }),
-  ],
+  plugins: plugins,
   module: {
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              hmr: process.env.NODE_ENV === 'development',
-            },
-          },
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',
           'sass-loader',
@@ -323,20 +325,32 @@ While we attempt to hmr css-modules. It is not easy to perform when code-splitti
 `reloadAll` is an option that should only be enabled if HMR isn't working correctly.
 The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
 
+You should not use this plugin if you are using a `webpack-dev-server`.
+`webpack-dev-server` enables / disables HMR using `hot` option.
+
 **webpack.config.js**
 
 ```js
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const devMode = process.env.NODE_ENV !== 'production';
+
+const plugins = [
+  new MiniCssExtractPlugin({
+    // Options similar to the same options in webpackOptions.output
+    // both options are optional
+    filename: devMode ? '[name].css' : '[name].[hash].css',
+    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+  }),
+];
+
+if (devMode) {
+  // only enable hot in development
+  plugins.push(new webpack.HotModuleReplacementPlugin());
+}
 
 module.exports = {
-  plugins: [
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-  ],
+  plugins: plugins,
   module: {
     rules: [
       {
@@ -345,8 +359,6 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              // only enable hot in development
-              hmr: process.env.NODE_ENV === 'development',
               // if hmr does not work, this is a forceful method.
               reloadAll: true,
             },
@@ -499,9 +511,11 @@ module.exports = {
 };
 ```
 
-### Module Filename Option
+### Filename Option as function
 
-With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.
+With the `filename` option you can use chunk data to customize the filename.
+This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk.
+In the example below, we'll use `filename` to output the generated css into a different directory.
 
 **webpack.config.js**
 
@@ -511,7 +525,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   plugins: [
     new MiniCssExtractPlugin({
-      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+      filename: ({ pathData }) =>
+        `${pathData.chunk.name.replace('/js/', '/css/')}.css`,
     }),
   ],
   module: {

babel.config.js

@@ -10,7 +10,7 @@ module.exports = (api) => {
         '@babel/preset-env',
         {
           targets: {
-            node: '6.9.0',
+            node: '10.13.0',
           },
         },
       ],

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   '*.js': ['prettier --write', 'eslint --fix', 'git add'],
-  '*.{json,md,yml,css}': ['prettier --write', 'git add'],
+  '*.{json,md,yml,css,ts}': ['prettier --write', 'git add'],
 };