Fix Webpack, PostCSS and related configs

This commit is contained in:
panr 2018-07-23 20:55:16 +02:00
parent cc7f434e0f
commit ee72421ecb
13 changed files with 886 additions and 1127 deletions

96
.eslintrc.yml Normal file
View File

@ -0,0 +1,96 @@
---
env:
es6: true
extends:
# https://github.com/airbnb/javascript
- airbnb
- eslint:recommended
- prettier
parser: babel-eslint
rules:
# best practices
arrow-parens:
- 2
- as-needed
semi:
- 2
- never
class-methods-use-this: 0
comma-dangle:
- 2
- always-multiline
no-console:
- 2
no-unused-expressions: 0
no-param-reassign:
- 2
- props: false
no-useless-escape: 0
func-names: 0
quotes:
- 2
- single
- allowTemplateLiterals: true
no-underscore-dangle: 0
object-curly-newline: 0
function-paren-newline: 0
operator-linebreak:
- 2
- after
no-unused-vars:
- 2
- argsIgnorePattern: "^_"
# jsx a11y
jsx-a11y/no-static-element-interactions: 0
jsx-a11y/anchor-is-valid:
- 2
- specialLink:
- to
# react
react/prop-types: 0
react/jsx-filename-extension: 0
react/jsx-no-bind:
- 2
- ignoreRefs: true
react/jsx-first-prop-new-line:
- 2
- never
react/jsx-indent-props:
- 2
- 2
react/jsx-closing-bracket-location:
- 1
- selfClosing: after-props
nonEmpty: after-props
react/prefer-stateless-function:
- 1
- ignorePureComponents: true
react/jsx-boolean-value:
- 2
- always
react/no-unused-prop-types: 0
# import - wyłączone! jak pogodzić resolver webpack i react-native?
import/no-unresolved: 0
import/extensions: 0
import/no-extraneous-dependencies: 0
import/prefer-default-export: 0
flowtype/delimiter-dangle:
- 2
- always-multiline
flowtype/require-return-type:
- 2
- always
- excludeArrowFunctions: true
annotateUndefined: always
globals:
document: true
requestAnimationFrame: true
window: true
self: true
fetch: true
Headers: true

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"parser": "babylon",
"printWidth": 100,
"trailingComma": "all"
}

View File

@ -1,9 +1,5 @@
<script src="/assets/main.js"></script> <script src="/assets/main.js"></script>
<script src="/assets/menu.js"></script>
<script src="/assets/theme.js"></script>
<script src="/assets/prism.js"></script> <script src="/assets/prism.js"></script>

View File

@ -14,22 +14,24 @@
"@babel/plugin-transform-runtime": "^7.0.0-beta.54", "@babel/plugin-transform-runtime": "^7.0.0-beta.54",
"@babel/preset-env": "^7.0.0-beta.54", "@babel/preset-env": "^7.0.0-beta.54",
"@babel/preset-stage-2": "^7.0.0-beta.54", "@babel/preset-stage-2": "^7.0.0-beta.54",
"babel-eslint": "8.2.1",
"babel-loader": "^8.0.0-beta.0", "babel-loader": "^8.0.0-beta.0",
"browserslist": "^4.0.1", "browserslist": "^4.0.1",
"clean-webpack-plugin": "^0.1.16", "clean-webpack-plugin": "^0.1.16",
"css-loader": "^1.0.0", "css-loader": "^1.0.0",
"cssnano": "^4.0.3",
"eslint-config-prettier": "^2.9.0", "eslint-config-prettier": "^2.9.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"postcss": "^7.0.0", "postcss": "^7.0.0",
"postcss-browser-reporter": "^0.5.0", "postcss-browser-reporter": "^0.5.0",
"postcss-cli": "^6.0.0",
"postcss-import": "^11.1.0", "postcss-import": "^11.1.0",
"postcss-loader": "^2.0.5", "postcss-loader": "^2.0.5",
"postcss-nested": "^3.0.0", "postcss-nested": "^3.0.0",
"postcss-preset-env": "^5.2.2", "postcss-preset-env": "^5.2.2",
"postcss-reporter": "^5.0.0", "postcss-reporter": "^5.0.0",
"postcss-strip-inline-comments": "^0.1.5",
"postcss-url": "^7.3.2", "postcss-url": "^7.3.2",
"prettier-eslint-cli": "^4.7.1", "prettier-eslint-cli": "^4.7.1",
"ramda": "^0.25.0", "ramda": "^0.25.0",

View File

@ -1,19 +1,21 @@
const url = require('postcss-url') const url = require("postcss-url");
const imports = require('postcss-import') const imports = require("postcss-import");
const nested = require('postcss-nested') const nested = require("postcss-nested");
const stripComments = require('postcss-strip-inline-comments') const postCSSPresetEnv = require("postcss-preset-env");
const postCSSPresetEnv = require('postcss-preset-env') const browsers = require("browserslist");
const browsers = require('browserslist') const cssnano = require("cssnano");
module.exports = () => ({ module.exports = () => ({
plugins: [ plugins: [
stripComments,
url, url,
imports, imports,
nested, nested,
postCSSPresetEnv({ postCSSPresetEnv({
stage: 1, stage: 1,
browsers: 'last 2 versions', browsers: "last 2 versions",
}) }),
] cssnano({
}) preset: "default",
}),
],
});

View File

@ -1 +1 @@
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}({4:function(e,t,r){"use strict"}}); !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),n(2),e.exports=n(3)},function(e,t,n){"use strict"},function(e,t,n){"use strict";var r=document.querySelector(".menu-trigger"),o=document.querySelector(".menu"),u=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),i=function(){return window.matchMedia(u).matches},c=function(){r&&r.classList.toggle("hidden",!i()),o&&o.classList.toggle("hidden",i())};c(),r.addEventListener("click",function(){return o&&o.classList.toggle("hidden")}),window.addEventListener("resize",c)},function(e,t,n){"use strict";var r=localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),u="dark"===r;document.body.classList.toggle("dark-theme",u),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}]);

View File

@ -1 +0,0 @@
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}({3:function(e,t,n){"use strict";var r=document.querySelector(".menu-trigger"),o=document.querySelector(".menu"),u=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),i=function(){return window.matchMedia(u).matches},c=function(){r&&r.classList.toggle("hidden",!i()),o&&o.classList.toggle("hidden",i())};c(),r.addEventListener("click",function(){return o&&o.classList.toggle("hidden")}),window.addEventListener("resize",c)}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}({2:function(e,t,r){"use strict";var n=localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),u="dark"===n;document.body.classList.toggle("dark-theme",u),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}});

View File

@ -1,41 +1,37 @@
const Webpack = require('webpack') const Webpack = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanPlugin = require('clean-webpack-plugin') const CleanPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const path = require('path') const path = require("path");
const isProduction = process.env.NODE_ENV === 'production' const isProduction = process.env.NODE_ENV === "production";
const join = (...paths) => path.join(__dirname, ...paths) const join = (...paths) => path.join(__dirname, ...paths);
module.exports = { module.exports = {
resolve: { resolve: {
extensions: [ extensions: [".js", ".css"],
'.js', modules: ["source", "node_modules"],
'.css'
],
modules: [
'source',
'node_modules'
]
}, },
watch: !isProduction, watch: !isProduction,
entry: { entry: {
'main.js': join('source', 'js', 'index.js'), "main.js": [
'menu.js': join('source', 'js', 'menu.js'), join("source", "js", "index.js"),
'theme.js': join('source', 'js', 'theme.js'), join("source", "js", "menu.js"),
'prism.js': join('source', 'js', 'prism.js'), join("source", "js", "theme.js"),
'style.css': join('source', 'css', 'style.css'), ],
"prism.js": join("source", "js", "prism.js"),
"style.css": join("source", "css", "style.css"),
}, },
output: { output: {
filename: '[name]', filename: "[name]",
path: join('static/assets'), path: join("static/assets"),
publicPath: '' publicPath: "",
}, },
performance: { performance: {
hints: false hints: false,
}, },
module: { module: {
rules: [ rules: [
@ -43,80 +39,80 @@ module.exports = {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: /node_modules/,
use: { use: {
loader: 'babel-loader', loader: "babel-loader",
options: { options: {
presets: ['@babel/preset-env'] presets: ["@babel/preset-env"],
} },
} },
}, },
{ {
test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/, test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/,
use: [ use: [
{ {
loader: 'url-loader', loader: "url-loader",
options: { options: {
limit: 8192 limit: 8192,
} },
} },
] ],
}, },
{ {
test: /\.css$/, test: /\.css$/,
use: ExtractTextPlugin.extract({ use: ExtractTextPlugin.extract({
fallback: 'style-loader', fallback: "style-loader",
use: [ use: [
{ {
loader: 'css-loader', loader: "css-loader",
options: { options: {
minimize: true, minimize: true,
modules: true, modules: true,
importLoaders: 1, importLoaders: 1,
localIdentName: '[local]' localIdentName: "[local]",
} },
}, },
{ {
loader: 'postcss-loader', loader: "postcss-loader",
options: { options: {
config: { config: {
path: 'postcss.config.js' path: "postcss.config.js",
} },
} },
} },
] ],
}) }),
} },
] ],
}, },
optimization: { optimization: {
splitChunks: { splitChunks: {
name: 'vendor', name: "vendor",
minChunks: 2 minChunks: 2,
}, },
minimizer: [ minimizer: [
new UglifyJsPlugin({ new UglifyJsPlugin({
sourceMap: false, sourceMap: false,
}) }),
] ],
}, },
plugins: [ plugins: [
new CleanPlugin(join('static/assets')), new CleanPlugin(join("static/assets")),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: join('source', 'html', 'inject.script.ejs'), template: join("source", "html", "inject.script.ejs"),
filename: join('layouts', 'partials', 'inject.script.html'), filename: join("layouts", "partials", "inject.script.html"),
inject: false
}),
new HtmlWebpackPlugin({
template: join('source', 'html', 'inject.stylesheet.ejs'),
filename: join('layouts', 'partials', 'inject.stylesheet.html'),
inject: false, inject: false,
}), }),
new ExtractTextPlugin('[name]'), new HtmlWebpackPlugin({
template: join("source", "html", "inject.stylesheet.ejs"),
filename: join("layouts", "partials", "inject.stylesheet.html"),
inject: false,
}),
new ExtractTextPlugin("[name]"),
new Webpack.LoaderOptionsPlugin({ new Webpack.LoaderOptionsPlugin({
minimize: true, minimize: true,
debug: true debug: true,
}), }),
new Webpack.DefinePlugin({ new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development') "process.env.NODE_ENV": JSON.stringify("development"),
}) }),
] ],
} };

732
yarn.lock

File diff suppressed because it is too large Load Diff