feat (webpack) : add webpack 5 and usefull tools ⚒️

.babelrc

@@ -2,7 +2,7 @@
 	"presets": [
 		["@babel/preset-env", {
 			"targets": {
-				"browsers": ["last 2 versions", "ie >= 9", "Firefox ESR"]
+				"browsers": ["last 2 versions", "IE 11", "> 0.25%"]
 			}
 		}]
 	],

.eslintrc

@@ -0,0 +1,35 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "prettier"
+    ],
+    "plugins": ["prettier"],
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-console": "off",
+        "strict": ["error", "global"],
+        "curly": "warn",
+        "semi": [2, "never"],
+        "no-new": 0,
+        "prettier/prettier": [
+            "error",
+            {
+                "trailingComma": "es5",
+                "singleQuote": true,
+                "printWidth": 120,
+                "semi": false
+            }
+        ]
+    },
+    "globals": {
+        "jQuery": true
+    }
+  }

.gitignore

@@ -65,9 +65,6 @@ dist/assets/img/sample/cache
 ### PHPStorm ###
 .idea/
 
-### Conf Webpack ###
-config/host.js
-
 ### frontend build directory ###
 dist/
 src/conf-img/*.csv
@@ -76,7 +73,5 @@ src/conf-img/*.csv
 package-lock.json
 
 ### config
-.port
-.bs-port
 /vendor/
 composer.lock

.nvmrc

@@ -1 +1 @@
-10
+14

.port

@@ -0,0 +1 @@
+

config/browsersync.config.js

@@ -0,0 +1,48 @@
+const fs = require('fs')
+const yaml = require('js-yaml')
+const portfinder = require('portfinder')
+
+let landoProjectName = 'sample'
+
+try {
+  let fileContents = fs.readFileSync('../../../../.lando.yml', 'utf8')
+  let data = yaml.load(fileContents)
+
+  if (data.name) {
+    landoProjectName = data.name
+  }
+} catch (e) {
+  console.log(e)
+}
+
+// BrowserSync options
+const browserSyncOptions = {
+  port: 3000,
+  host: `${landoProjectName}.lndo.site`,
+  proxy: `https://${landoProjectName}.lndo.site/`,
+  https: true,
+  injectChanges: true,
+  files: ['*.php', '**/*.php', 'dist/*.css', 'dist/*.js', 'dist/img/icons/*.svg'],
+  startPath: '/',
+  notify: true,
+}
+
+// Plugin options
+const pluginOptions = {
+  injectCss: true,
+}
+
+portfinder.getPort(
+  {
+    port: 3000, // default port
+    stopPort: 3333, // maximum port
+  },
+  function (port) {
+    browserSyncOptions.port = port
+  }
+)
+
+module.exports = {
+  browserSyncOptions,
+  pluginOptions,
+}

config/entries.js

@@ -0,0 +1,4 @@
+module.exports = {
+  app: ['./src/js/app.js', './src/scss/style.scss'],
+  'editor-style': './src/scss/editor-style.scss',
+}

config/loaders.js

@@ -0,0 +1,77 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const SCSSLoader = {
+  test: /\.(scss|css)$/,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        importLoaders: 1,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          config: path.resolve(__dirname, 'postcss.config.js'),
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+      },
+    },
+  ],
+}
+
+const FontsLoader = {
+  test: /\.(woff2?|woff|eot|ttf|otf|mp3|wav)(\?.*)?$/,
+  use: {
+    loader: 'file-loader',
+    options: {
+      name: '[name].[ext]',
+      outputPath: './fonts/',
+    },
+  },
+}
+
+const JSLoader = {
+  test: /\.js$/i,
+  exclude: /node_modules/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      babelrc: true,
+    },
+  },
+}
+
+const SVGLoader = {
+  test: /icons\/.*\.svg$/,
+  use: [
+    {
+      loader: 'svg-sprite-loader',
+      options: {
+        extract: true,
+        publicPath: 'img/icons/',
+        spriteFilename: svgPath => `icons${svgPath.substr(-4)}`,
+        symbolId: filePath => `icon-${path.basename(filePath).slice(0, -4)}`,
+      },
+    },
+    {
+      loader: 'svgo-loader',
+    },
+  ],
+}
+
+module.exports = {
+  FontsLoader,
+  JSLoader,
+  SCSSLoader,
+  SVGLoader,
+}

config/plugins.js

@@ -0,0 +1,58 @@
+const path = require('path')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
+const _BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+const _ESLintPlugin = require('eslint-webpack-plugin')
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const _StyleLintPlugin = require('stylelint-webpack-plugin')
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
+const _WebpackBar = require('webpackbar')
+
+const browsersyncConfig = require('./browsersync.config')
+
+const BrowserSyncPlugin = new _BrowserSyncPlugin(browsersyncConfig.browserSyncOptions, browsersyncConfig.pluginOptions)
+
+const ESLintPlugin = new _ESLintPlugin({
+  overrideConfigFile: path.resolve(__dirname, '../.eslintrc'),
+  context: path.resolve(__dirname, '../src/js'),
+  files: '**/*.js',
+})
+
+const ManifestPlugin = new WebpackManifestPlugin({
+  fileName: 'assets.json',
+  filter: (file) => !file.isAsset,
+})
+
+const MiniCssExtractPluginDev = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+})
+
+const MiniCssExtractPluginProd = new _MiniCssExtractPlugin({
+  filename: '[name].[contenthash:8].min.css',
+})
+
+const StyleLintPlugin = new _StyleLintPlugin({
+  configFile: path.resolve(__dirname, '../.stylelintrc'),
+  context: path.resolve(__dirname, '../src/scss'),
+  files: '**/*.scss',
+})
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+})
+
+const WebpackBar = new _WebpackBar({
+  color: '#ffe600',
+})
+
+module.exports = {
+  BrowserSyncPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin(),
+  ESLintPlugin,
+  ManifestPlugin,
+  MiniCssExtractPluginDev,
+  MiniCssExtractPluginProd,
+  StyleLintPlugin,
+  SpriteLoaderPlugin,
+  WebpackBar,
+}

config/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-preset-env': {
+      browsers: 'last 2 versions',
+      stage: 0,
+    },
+    'postcss-pxtorem': { propWhiteList: [] },
+    cssnano: {},
+  },
+}

config/stylelint.config.js

@@ -0,0 +1,57 @@
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
+  plugins: ['stylelint-scss'],
+  rules: {
+    'block-closing-brace-empty-line-before': null,
+    'block-closing-brace-newline-after': null,
+    'block-closing-brace-newline-before': null,
+    'block-closing-brace-space-before': null,
+    'block-opening-brace-newline-after': null,
+    'block-opening-brace-space-after': null,
+    'block-opening-brace-space-before': 'always',
+    'declaration-block-semicolon-newline-after': null,
+    'declaration-block-semicolon-space-after': null,
+    'declaration-block-semicolon-space-before': null,
+    'declaration-block-trailing-semicolon': 'always',
+    indentation: 4,
+    'no-descending-specificity': null,
+    'number-leading-zero': 'never',
+    'declaration-colon-newline-after': null,
+    'max-line-length': 400,
+    'no-eol-whitespace': [
+      true,
+      {
+        ignore: ['empty-lines'],
+      },
+    ],
+    'at-rule-empty-line-before': [
+      'always',
+      {
+        ignore: ['inside-block', 'blockless-after-same-name-blockless', 'blockless-after-blockless'],
+      },
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'extend',
+          'at-root',
+          'debug',
+          'warn',
+          'error',
+          'if',
+          'else',
+          'for',
+          'each',
+          'while',
+          'mixin',
+          'include',
+          'content',
+          'return',
+          'function',
+        ],
+      },
+    ],
+    'string-quotes': 'double',
+  },
+}