Merge pull request #12 from webtime-studio/feature/add-preload-and-svg-sprites

Добавляет PreloadWebpackPlugin, SpriteLoaderPlugin обновляет зависимости

Author: tinakuzmenko

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">Create HTML boilerplate</h1>
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-green.svg?cacheSeconds=2592000" />
+  <img alt="Version" src="https://img.shields.io/badge/version-1.2.0-green.svg?cacheSeconds=2592000" />
   <img src="https://img.shields.io/badge/node-%5E10.18-green.svg" />
 </p>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "create-html-boilerplate",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "create-html-boilerplate",
   "scripts": {
     "stylelint": "stylelint \"source/scss/**/*.(scss|css)\"",
@@ -10,15 +10,12 @@
     "prettier": "prettier --write \"source/(scss|js)/**/*.(scss|css|js|json)\"",
     "start": "webpack-dev-server --open"
   },
-  "engines": {
-    "node": "^10.16"
-  },
   "dependencies": {
     "concurrently": "^5.3.0",
     "picturefill": "^3.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "9.8.6",
+    "autoprefixer": "10.0.0",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "6.0.3",
@@ -35,17 +32,21 @@
     "node-sass": "4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "postcss-loader": "3.0.0",
+    "preload-webpack-plugin": "^3.0.0-beta.3",
     "prettier": "^2.0.5",
     "raw-loader": "4.0.1",
-    "sass-loader": "9.0.3",
-    "stylelint": "13.6.1",
+    "sass-loader": "10.0.2",
+    "stylelint": "13.7.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-prettier": "^1.1.2",
     "stylelint-scss": "^3.18.0",
-    "terser-webpack-plugin": "4.1.0",
-    "webpack": "^4.44.1",
+    "svg-sprite-loader": "^5.0.0",
+    "svgo": "^1.3.2",
+    "svgo-loader": "^2.2.1",
+    "terser-webpack-plugin": "4.2.2",
+    "webpack": "^4.44.2",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   }

package.json

@@ -4,10 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="format-detection" content="telephone=no" />
-    <meta
-      name="description"
-      content="HTML5 webpack boilerplate"
-    />
+    <meta name="description" content="HTML5 webpack boilerplate" />
     <title>HTML5 webpack boilerplate</title>
     <link rel="stylesheet" href="/vendors/normalize-css/normalize.min.css" />
     <script>

postcss.config.js

@@ -1,3 +1,3 @@
 // Это - ваша точка входа для скриптов страницы. Импортируйте сюда нужные вам файлы.
 
-import "./script";
+import './script';

source/html/views/index.html

@@ -2,7 +2,6 @@
   display: flex;
   justify-content: center;
   padding: 20px 0;
-
 }
 
 .nav__logo {

source/js/index.js

@@ -2,8 +2,7 @@
 
 @font-face {
   font-family: "Roboto";
-  src:
-    url("../fonts/Roboto-Regular.woff2") format("woff2"),
+  src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
     url("../fonts/Roboto-Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;

source/scss/blocks/nav.scss

@@ -10,6 +10,8 @@ const ImageminPlugin = require('imagemin-webpack-plugin').default;
 const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const PreloadWebpackPlugin = require('preload-webpack-plugin');
+const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 
 const isProd = process.argv.indexOf('-p') !== -1;
 
@@ -40,7 +42,7 @@ module.exports = {
   entry: {
     bundle: './source/js/index.js',
     libs: ['picturefill'],
-    style: './source/scss/style.scss'
+    style: './source/scss/style.scss',
   },
   devtool: 'inline-source-map',
   devServer: {
@@ -72,6 +74,11 @@ module.exports = {
           },
           {
             loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [['autoprefixer']],
+              },
+            },
           },
           {
             loader: 'sass-loader',
@@ -88,12 +95,17 @@ module.exports = {
   plugins: [
     new webpack.ProgressPlugin(),
     new CleanWebpackPlugin(),
+    new SpriteLoaderPlugin(),
     new MiniCssExtractPlugin({
       filename: 'css/[name].min.css',
     }),
     new HtmlWebpackPlugin({
       template: 'source/html/views/index.html',
     }),
+    new PreloadWebpackPlugin({
+      rel: 'preload',
+      include: 'allChunks', // or 'initial', or 'allAssets'
+    }),
     new CopyWebpackPlugin({
       patterns: [
         {