Merge pull request #3022 from wallabag/webpack

Adds Webpack support and remove Grunt

app/config/config.yml

@@ -3,6 +3,10 @@ imports:
     - { resource: security.yml }
     - { resource: services.yml }
 
+parameters:
+    # Allows to use the live reload feature for changes in assets
+    use_webpack_dev_server: false
+
 framework:
     #esi:             ~
     translator:

app/config/config_prod.yml

@@ -1,9 +1,9 @@
 imports:
     - { resource: config.yml }
 
-#framework:
-#    cache:
-#        system: cache.adapter.apcu
+framework:
+    assets:
+        # json_manifest_path: '%kernel.root_dir%/../web/bundles/wallabagcore/manifest.json'
 
 #doctrine:
 #    orm:

app/config/webpack/common.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const webpack = require('webpack');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+
+const rootDir = path.resolve(__dirname, '../../../');
+
+module.exports = function() {
+  return {
+    entry: {
+      material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
+      baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
+    },
+
+    output: {
+      filename: '[name].js',
+      path: path.resolve(rootDir, 'web/bundles/wallabagcore'),
+      publicPath: '/bundles/wallabagcore/',
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'window.$': 'jquery',
+        'window.jQuery': 'jquery'
+      }),
+      new StyleLintPlugin({
+        configFile: '.stylelintrc',
+        failOnError: false,
+        quiet: false,
+        context: 'app/Resources/static/themes',
+        files: '**/*.scss',
+      }),
+    ],
+    resolve: {
+      alias: {
+        jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js')
+      }
+    },
+  };
+};

app/config/webpack/dev.js

@@ -0,0 +1,62 @@
+const webpackMerge = require('webpack-merge');
+const webpack = require('webpack');
+const path = require('path');
+const commonConfig = require('./common.js');
+
+module.exports = function () {
+  return webpackMerge(commonConfig(), {
+    devtool: 'eval-source-map',
+    output: {
+      filename: '[name].dev.js'
+    },
+
+    devServer: {
+      hot: true,
+      // enable HMR on the server
+
+      contentBase: './web',
+      // match the output path
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
+    module: {
+      rules: [
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.js$/,
+          exclude: /(node_modules)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['env']
+            }
+          }
+        },
+        {
+          test: /\.(s)?css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+          'postcss-loader',
+          'sass-loader'
+          ]
+        },
+        {
+          test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/,
+          use: 'url-loader'
+        },
+      ]
+    },
+  })
+};

app/config/webpack/prod.js

@@ -0,0 +1,99 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
+
+const commonConfig = require('./common.js');
+
+module.exports = function() {
+  return webpackMerge(commonConfig(), {
+    output: {
+      filename: '[name].js'
+    },
+    devtool: 'source-map',
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          'NODE_ENV': JSON.stringify('production')
+        }
+      }),
+      new webpack.optimize.UglifyJsPlugin({
+        beautify: false,
+        mangle: {
+          screw_ie8: true,
+          keep_fnames: true
+        },
+        compress: {
+          screw_ie8: true,
+          warnings: false
+        },
+        comments: false
+      }),
+      new ExtractTextPlugin('[name].css'),
+      new ManifestPlugin({
+        fileName: 'manifest.json',
+      })
+    ],
+    module: {
+      rules: [
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.js$/,
+          exclude: /(node_modules)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['env']
+            }
+          }
+        },
+        {
+          test: /\.(s)?css$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {
+                  importLoaders: 1,
+                  minimize: {
+                    discardComments: {
+                      removeAll: true
+                    },
+                    core: true,
+                    minifyFontValues: true
+                  }
+                }
+              },
+              'postcss-loader',
+              'sass-loader'
+            ]
+          })
+        },
+        {
+          test: /\.(jpg|png|gif|svg)$/,
+          use: {
+            loader: 'file-loader',
+            options: {
+              name: 'img/[name].[ext]',
+            }
+          }
+        },
+        {
+          test: /\.(eot|ttf|woff|woff2)$/,
+          use: {
+            loader: 'file-loader',
+            options: {
+              name: 'fonts/[name].[ext]',
+            }
+          }
+        }
+      ]
+    },
+  })
+};