Update webpack config

plonegovbr · Oct 13, 2018 · 9ba9492 · 9ba9492
1 parent 9f5205b
commit 9ba9492
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 130 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -4,6 +4,9 @@ Changelog
 2.0b5 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
+- Atualiza configuração do webpack.
+  [rodfersou]
+
 - Move link para voltar para o topo em um viewlet no brasil.gov.portal para permitir internacionalização.
   [rodfersou]
 

diff --git a/buildout.cfg b/buildout.cfg
@@ -51,3 +51,4 @@ short_name = brasilgovtemas
 # Necessário colocar o pacote com versão vazia para que outras versões no
 # buildout-cache não sobrescrevam o próprio pacote.
 brasil.gov.temas =
+sc.recipe.staticresources = 1.1b5
diff --git a/webpack/package.json b/webpack/package.json
@@ -1,10 +1,10 @@
 {
   "name": "brasilgovtemas",
-  "version": "0.0.1",
+  "version": "2.0.2",
   "main": "app/brasilgovtemas.js",
   "scripts": {
     "build": "./node_modules/.bin/webpack -p",
-    "debug": "./node_modules/.bin/webpack --watch",
+    "debug": "NODE_ENV=debug ./node_modules/.bin/webpack --watch",
     "watch": "./node_modules/.bin/webpack -p --watch",
     "test": "NODE_ENV=testing ./node_modules/.bin/karma start --single-run"
   },
@@ -25,9 +25,7 @@
   "repository": {},
   "license": "GPL-2.0",
   "dependencies": {
-    "copy-webpack-plugin": "^4.5.1",
-    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources#1.0b1",
-    "jquery.cookie": "^1.4.1",
-    "webpack-clean-obsolete-chunks": "^0.3.0"
+    "sc-recipe-staticresources": "simplesconsultoria/sc.recipe.staticresources#1.1b5",
+    "jquery.cookie": "^1.4.1"
   }
 }
diff --git a/webpack/postcss.config.js b/webpack/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    'postcss-cssnext': {
+    'postcss-preset-env': {
       browsers: 'last 3 versions'
     }
   },

diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -1,137 +1,72 @@
-const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
+const makeConfig = require('sc-recipe-staticresources');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SpritesmithPlugin = require('webpack-spritesmith');
 
 
 let createTheme = (theme) => {
   let publicPath = `++theme++${theme}/`;
-  return {
-    entry: [
-      './app/brasilgovtemas.js',
-      `./app/${theme}/brasilgovtemas.scss`,
-      `./app/${theme}/preview.png`
-    ],
-    output: {
-      filename: `brasilgovtemas-[hash].js`,
-      library: 'leitrabalhista',
-      libraryTarget: 'umd',
-      path: `${__dirname}/../src/brasil/gov/temas/themes/${theme}`,
-      publicPath: publicPath,
-    },
-    externals: {
-      jquery: 'jQuery'
-    },
-    plugins: [
-      new CleanObsoleteChunks({
-        verbose: true,
-        deep: true,
-      }),
-      new CopyWebpackPlugin([
-        { from: 'app/rules.xml', to: 'rules.xml' },
-        { from: 'app/favicons/android-chrome-192x192.png', to: 'favicons/android-chrome-192x192.png' },
-        { from: 'app/favicons/android-chrome-512x512.png', to: 'favicons/android-chrome-512x512.png' },
-        { from: 'app/favicons/apple-touch-icon.png', to: 'favicons/apple-touch-icon.png' },
-        { from: 'app/favicons/favicon-16x16.png', to: 'favicons/favicon-16x16.png' },
-        { from: 'app/favicons/favicon-32x32.png', to: 'favicons/favicon-32x32.png' },
-        { from: 'app/favicons/mstile-150x150.png', to: 'favicons/mstile-150x150.png' },
-        { from: 'app/favicons/safari-pinned-tab.svg', to: 'favicons/safari-pinned-tab.svg' },
-        { from: `app/${theme}/favicons/browserconfig.xml`, to: 'favicons/browserconfig.xml' },
-        { from: `app/${theme}/favicons/manifest.json`, to: 'favicons/manifest.json' },
-        { from: `app/${theme}/manifest.cfg`, to: 'manifest.cfg' },
-      ], {
-      }),
-      new ExtractTextPlugin({
-        filename: 'brasilgovtemas-[hash].css',
-        allChunks: true
-      }),
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        template: 'app/index.html',
-        publicPath: publicPath,
-      }),
-      new HtmlWebpackPlugin({
-        filename: 'index-minimalista.html',
-        template: 'app/index-minimalista.html',
-        publicPath: publicPath,
-      }),
-      new SpritesmithPlugin({
-        src: {
-          cwd: `app/${theme}/sprite`,
-          glob: '*.png'
-        },
-        target: {
-          image: `app/${theme}/img/sprite.png`,
-          css: `app/${theme}/_sprite.scss`
-        },
-        apiOptions: {
-          cssImageRef: './img/sprite.png'
-        }
-      })
-    ],
-    module: {
-      rules: [{
-        test: /\.js$/,
-        exclude: /(\/node_modules\/|test\.js$|\.spec\.js$)/,
-        use: 'babel-loader',
-      }, {
-        test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader',
-            'postcss-loader',
-            'sass-loader'
-          ]
-        })
-      }, {
-        test: /\.(eot|svg|ttf|woff|woff2)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[path][name].[ext]',
-            context: 'app/'
-          }
-        }
-      }, {
-        test: /.*\.(gif|png|jpe?g)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[path][name].[ext]',
-              context: `app/${theme}/`
-            }
+
+  return makeConfig(
+    // name
+    'brasil.gov.temas',
+
+    //shortName
+    'brasilgovtemas',
+
+    //path
+    `${__dirname}/../src/brasil/gov/temas/themes/${theme}`,
+
+    //publicPath
+    publicPath,
+
+    // callback
+    function(config, options) {
+      config.entry.unshift(
+        `./app/${theme}/preview.png`,
+        `./app/${theme}/brasilgovtemas.scss`,
+      );
+      // Change image handler context
+      config.module.rules[2].use[0].options.context = `app/${theme}/`;
+      config.plugins.push(
+        new CopyWebpackPlugin([
+          { from: 'app/rules.xml', to: 'rules.xml' },
+          { from: 'app/favicons/android-chrome-192x192.png', to: 'favicons/android-chrome-192x192.png' },
+          { from: 'app/favicons/android-chrome-512x512.png', to: 'favicons/android-chrome-512x512.png' },
+          { from: 'app/favicons/apple-touch-icon.png', to: 'favicons/apple-touch-icon.png' },
+          { from: 'app/favicons/favicon-16x16.png', to: 'favicons/favicon-16x16.png' },
+          { from: 'app/favicons/favicon-32x32.png', to: 'favicons/favicon-32x32.png' },
+          { from: 'app/favicons/mstile-150x150.png', to: 'favicons/mstile-150x150.png' },
+          { from: 'app/favicons/safari-pinned-tab.svg', to: 'favicons/safari-pinned-tab.svg' },
+          { from: `app/${theme}/favicons/browserconfig.xml`, to: 'favicons/browserconfig.xml' },
+          { from: `app/${theme}/favicons/manifest.json`, to: 'favicons/manifest.json' },
+          { from: `app/${theme}/manifest.cfg`, to: 'manifest.cfg' },
+        ], {
+        }),
+        new HtmlWebpackPlugin({
+          filename: 'index-minimalista.html',
+          template: 'app/index-minimalista.html',
+          publicPath: publicPath,
+        }),
+        new SpritesmithPlugin({
+          src: {
+            cwd: `app/${theme}/sprite`,
+            glob: '*.png'
+          },
+          target: {
+            image: `app/${theme}/img/sprite.png`,
+            css: `app/${theme}/_sprite.scss`
           },
-          {
-            loader: 'image-webpack-loader',
-            query: {
-              mozjpeg: {
-                progressive: true,
-              },
-              pngquant: {
-                quality: '65-90',
-                speed: 4
-              },
-              gifsicle: {
-                interlaced: false
-              },
-              optipng: {
-                optimizationLevel: 7
-              }
-            }
+          apiOptions: {
+            cssImageRef: './img/sprite.png'
           }
-        ]
-      }, {
-        test: /\.svg/,
-        exclude: /node_modules/,
-        use: 'svg-url-loader'
-      }]
-    }
-  };
+        }),
+      );
+    },
+  );
 };
 
+
 module.exports = [
   createTheme('padrao'),
   createTheme('branco'),