Merge pull request #3 from leviy/feature/implement-manifest

LPD-8206: Implemented webpack-manifest-plugin to add the use of hashed files and a manifest file

README.md

@@ -25,6 +25,27 @@ module.exports = new Config()
     .extend('@leviy/webpack-config-default/webpack.config.js');
 ```
 
+## Manifest & Symfony
+
+A `manifest.json` file will created by default. To use this manifest together with a Symfony application
+just add this to the `config/packages/framework.yaml` configuration:
+
+```yaml
+framework:
+  ...
+
+  assets:
+    json_manifest_path: '%kernel.project_dir%/public/dist/manifest.json'
+```
+
+Referencing an asset from templates should be done with the `asset` twig function:
+
+```twig
+{{ asset('dist/app.js') }}
+```
+
+Symfony is then able to figure out the correct location of the asset based on the configured manifest file.
+
 ## Customize
 
 With `.set(path, configuration)` you can replace the given configuration `path` completely.

package.json

@@ -1,19 +1,27 @@
 {
     "name": "@leviy/webpack-config-default",
-    "version": "1.0.2",
+    "version": "2.0.0",
     "repository": {
         "type": "git",
         "url": "git+ssh://git@github.com:leviy/webpack-config-default.git"
     },
     "homepage": "https://github.com/leviy/webpack-config-default/",
     "dependencies": {
         "babel-loader": "^7.1",
+        "clean-webpack-plugin": "^0.1",
         "css-loader": "^0.28",
         "file-loader": "^1.1",
         "mini-css-extract-plugin": "^0.4",
         "postcss-loader": "^2.1",
         "sass-loader": "^7.0",
         "twig-loader": "^0.4",
+        "webpack-config": "^7.5",
+        "webpack-manifest-plugin": "^2.0"
+    },
+    "devDependencies": {
+        "node-sass": "^4.9",
+        "webpack": "^4.8",
+        "webpack-cli": "^2.1",
         "webpack-config": "^7.5"
     },
     "peerDependencies": {

webpack.config.js

@@ -1,17 +1,20 @@
 const { Config, environment } = require('webpack-config');
 
-const path = require('path');
 const webpack = require('webpack');
 
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const autoprefix = require('autoprefixer');
 
 environment.setAll({
     env: () => process.env.WEBPACK_ENV,
 });
 
-const mode = process.env.WEBPACK_ENV === 'development' ? 'development' : 'production';
-const devtool = process.env.WEBPACK_ENV === 'development' ? 'inline-source-map' : '';
+const development = process.env.WEBPACK_ENV === 'development';
+
+const mode = development ? 'development' : 'production';
+const devtool = development ? 'inline-source-map' : '';
 
 module.exports = new Config().defaults({
     mode: mode,
@@ -22,7 +25,7 @@ module.exports = new Config().defaults({
         ],
     },
     output: {
-        filename: '[name].js',
+        filename: development ? '[name].js' : '[name].[hash].js',
     },
     module: {
         rules: [
@@ -61,7 +64,7 @@ module.exports = new Config().defaults({
                     {
                         loader: 'file-loader',
                         options: {
-                            name: 'images/[name].[hash:8].[ext]',
+                            name: development ? 'images/[name].[ext]' : 'images/[name].[hash].[ext]',
                         },
                     },
                 ],
@@ -73,8 +76,15 @@ module.exports = new Config().defaults({
             $: 'jquery',
             jQuery: 'jquery',
         }),
+        new CleanWebpackPlugin(['public/dist'], {
+            exclude: ['resources'],
+        }),
         new MiniCssExtractPlugin({
-            filename: '[name].css',
+            filename: development ? '[name].css' : '[name].[hash].css',
+        }),
+        new ManifestPlugin({
+            basePath: 'dist/',
+            publicPath: 'dist/',
         }),
     ],
 });