Минимизация css, корректировка правил, хеширование файлов, настройки сборок (#6)

.eslintignore

@@ -3,4 +3,3 @@
 /out
 .vscode
 .idea
-webpack.config.js

.eslintrc.json

@@ -20,7 +20,7 @@
                 "checkForEach": true
             }
         ],
-        "default-case": "error",
+        "default-case": "warn",
         "default-param-last": "error",
         "no-alert": "warn",
         "no-constructor-return": "error",

package.json

@@ -31,6 +31,7 @@
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.6.0",
+    "cssnano": "^4.1.10",
     "eslint": "^7.4.0",
     "eslint-loader": "^4.0.2",
     "file-loader": "^6.0.0",
@@ -39,6 +40,9 @@
     "image-webpack-loader": "^6.0.0",
     "jsdoc": "^3.6.4",
     "mini-css-extract-plugin": "^0.9.0",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",

postcss.config.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'postcss-preset-env': {},
+        'cssnano': {}
+    }
+};

src/components/component/Component.js

@@ -56,7 +56,6 @@ class Component {
         const content = document.querySelector(mainNodeSelector).content;
         if (content.children.length > 1) {
             const message = '<template> должен содержать только один элемент children';
-            alert(message);
             throw new Error(message);
         }
         this.mainNode = content.firstElementChild.cloneNode(true);

webpack.config.js

@@ -1,18 +1,35 @@
+// eslint-disable-next-line no-undef
 const path = require('path');
+// eslint-disable-next-line no-undef
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+// eslint-disable-next-line no-undef
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// eslint-disable-next-line no-undef
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 
-module.exports = {
+// eslint-disable-next-line no-undef
+module.exports = (env, argv) => ({
     entry: './src/app.js',
     output: {
-        filename: 'script.js',
+        filename: '[hash].js',
+        // eslint-disable-next-line no-undef
         path: path.resolve(__dirname, 'dist'),
     },
     devServer: {
         compress: true,
         port: 9000,
     },
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+                defaultVendors: {
+                    test: /[\\/]node_modules[\\/]/,
+                    enforce: true,
+                },
+            }
+        },
+    },
     plugins: [
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
@@ -20,7 +37,7 @@ module.exports = {
             template: './src/app.html'
         }),
         new MiniCssExtractPlugin({
-            filename: 'style.css',
+            filename: '[hash].css',
         }),
     ],
     module: {
@@ -31,14 +48,24 @@ module.exports = {
             },
             {
                 test: /\.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'postcss-loader'
+                ],
             },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: [
                     'babel-loader',
-                    'eslint-loader'
+                    {
+                        loader: 'eslint-loader',
+                        options: (argv.mode === 'production') ? {
+                            failOnError: true,
+                            failOnWarning: true,
+                        } : {},
+                    }
                 ]
             },
             {
@@ -66,4 +93,4 @@ module.exports = {
             },
         ],
     },
-};
+});