Merge pull request #3 from LIN3S/master

Major refactor
fullpipe · Dec 30, 2016 · 56daf30 · 56daf30
2 parents 15868fa + d5696da
commit 56daf30
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 183 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-/vendor/
+/composer.lock
+/vendor
diff --git a/EntryTokenParser.php b/EntryTokenParser.php
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,4 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Eugene
+Copyright (c) 2016-2017 Eugene
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,78 +1,126 @@
-# Twig webpack extension
+# Twig Webpack extension
+> Inject your webpack entry points into twig templates with easy.
 
-### Install
+This repo provides a Twig extension that joins Webpack resultant files with Twig template engine in an easy way.
+This approach allows the dynamic insertion of the css stylesheets and js scripts with Webpack generated hash.
+>Also works well with **extract-text-webpack-plugin**
 
-`composer require fullpipe/twig-webpack-extension`
+### Install
+```bash
+$ composer require fullpipe/twig-webpack-extension
+```
 
-### Set up webpack
-Install webpack-manifest-plugin
+### Set up Webpack
+You need to install the `webpack-manifest-plugin`
+```bash
+$ npm install webpack-manifest-plugin --save-dev
 
-```
-npm install webpack-manifest-plugin --save
+# or with Yarn
+$ yarn add webpack-manifest-plugin --dev
 ```
 
 Configure `webpack.config.js`
-
 ```js
+// webpack.config.js
+
 var ManifestPlugin = require('webpack-manifest-plugin');
-...
+
+(...)
+
 module.exports = {
-    ...
-    entry: {
-        vendor: ["jquery", "lodash"],
-        main: './src/main.js'
-    },
-    output: {
-        ...
-        publicPath: '/build/', //required!
-        ...
-    },
-    plugins: [
-        new ManifestPlugin(),
-        ...
-    ]
+
+  (...)
+
+  entry: {
+    vendor: ["jquery", "lodash"],
+    main: './src/main.js'
+  },
+  output: {
+    (...)
+    path: './js'
+    publicPath: '/',    // required
+
+    (...)
+  },
+  plugins: [
+    new ManifestPlugin(),
+    new ExtractTextPlugin({
+      filename: './../css/[name].css',
+      publicPath: '/'
+    }),
+
+  (...)
+  ]
 }
 ```
 
-### Add twig extension
-
-In symfony 2/3
-
+### Register as a service the Twig extension inside Symfony
 ```yaml
+# app/config/services.yml
+
 parameters:
-    ...
+    (...)
+
     webpack.manifest: "%kernel.root_dir%/../web/build/manifest.json" #should be absolute
-    webpack.publicPath: /build/ #should be same as output.publicPath in webpack config
+    webpack.public_path_js: /js/
+    webpack.public_path_css: /css/
 
 services:
-    ...
-    app.twig_extension:
-        class: Fullpipe\Twig\Extension\Webpack\WebpackExtension
+    (...)
+
+    twig_extension.webpack:
+        class: Fullpipe\TwigWebpackExtension\WebpackExtension
+        public: false
         arguments:
-            - '%webpack.manifest%'
-            - '%webpack.publicPath%'
+            - "%webpack.manifest%"
+            - "%webpack.public_path_js%"
+            - "%webpack.public_path_css%"
         tags:
             - { name: twig.extension }
 ```
 
-### Inject entry points to your templates
-
+### Inject entry points to your Twig
 ```twig
-    {% webpack_entry 'vendor' %}
-    {% webpack_entry 'main' %}
-```
+{# app/Resources/views/base.html.twig #}
 
-### Others
-If you use `[hash]` or `[chunkhash]` in webpack.output
+(...)
 
-```js
-    output: {
-        filename: '[name].[chunkhash].js',
-        chunkFilename: '[name].[chunkhash].js'
-    },
+<head>
+(...)
+
+    {% webpack_entry_css 'main' %}
+</head>
+
+<body>
+(...)
+
+    {% webpack_entry_js 'vendor' %}
+    {% webpack_entry_js 'main' %}
+</body>
 ```
 
-You should clear twig cache after each webpack compilation.
-So for dev environment do not use `[hash]` or `[chunkhash]`.
+### Hashing output files avoiding the browser cache
+If you use `[hash]` or `[chunkhash]`:
+```js
+// webpack.config.js
+
+(...)
+
+output: {
+  (...)
 
-#### Works with extract-text-webpack-plugin
+  filename: '[name].[chunkhash].js',
+  chunkFilename: '[name].[chunkhash].js'
+},
+plugins: [
+  (...)
+
+  new ExtractTextPlugin({
+    filename: './../css/[name].[contenthash].css',
+    publicPath: '/'
+  }),
+
+  (...)
+]
+```
+>You should clear twig cache after each webpack compilation. So for dev environment do not use `[hash]` or `[chunkhash]`.
diff --git a/WebpackExtension.php b/WebpackExtension.php
diff --git a/composer.json b/composer.json
@@ -2,18 +2,24 @@
     "name": "fullpipe/twig-webpack-extension",
     "description": "Inject your webpack entry points into twig templates with easy.",
     "type": "library",
-    "keywords": ["webpack", "twig", "extension"],
-    "require": {
-        "twig/twig": "~1.20|~2.0"
-    },
     "license": "MIT",
+    "keywords": [
+        "webpack",
+        "twig",
+        "extension"
+    ],
     "authors": [
         {
             "name": "Eugene Bravov",
             "email": "[email protected]"
         }
     ],
+    "require": {
+        "twig/twig": "^1.20 || ^2.0"
+    },
     "autoload": {
-        "psr-4": { "Fullpipe\\Twig\\Extension\\Webpack\\": "" }
+        "psr-4": {
+            "Fullpipe\\TwigWebpackExtension\\": "src/Fullpipe/TwigWebpackExtension/"
+        }
     }
 }