Indebanvdhamer/performance

README.md

@@ -31,12 +31,12 @@ For now there are 3 commands you can use.
 # Loaders
 |Name|Additional parameters allowed|Description|
 |:--|:---|:---|
-|[css][css-loader]|`{env, postcssPresetEnvOptions}`|Loads a CSS file|
+|[css][css-loader]|`{env, postcssOpts}`|Loads a CSS file|
 |[cyclejs][cyclejs-loader]|`{excludePattern, plugins, presets}`|A functional and reactive JavaScript framework for predictable code. Uses [babel-loader][babel-loader]|
 |[graphql][graphql-loader]|`{excludePattern}`|A query language for your API|
 |[react][babel-loader]|`{excludePattern, plugins, presets}`|A JavaScript library for building user interfaces. Uses [babel-loader][babel-loader]|
-|[scss][sass-loader]|`{env, cwd, scssPath, useScssVariables, postcssPresetEnvOptions}`|Loads a Sass/SCSS file and compiles it to CSS.|
-|utils|`{env, postcssPresetEnvOptions}`|An aggregation of [postcss-loader][postcss-loader], [url-loader][url-loader] and [style-loader][style-loader]|
+|[scss][sass-loader]|`{env, scssVariables, postcssOpts}`|Loads a Sass/SCSS file and compiles it to CSS.|
+|utils|`{env, postcssOpts}`|An aggregation of [postcss-loader][postcss-loader], [url-loader][url-loader] and [style-loader][style-loader]|
 
 [babel-loader]: https://github.com/babel/babel-loader
 [css-loader]: https://github.com/webpack-contrib/css-loader
@@ -57,7 +57,7 @@ For now there are 3 commands you can use.
 |[html][html-webpack-plugin]|`{cwd, index}`|Plugin that simplifies creation of HTML files to serve your bundles|
 |[stats][webpack-bundle-analyzer]||Visualize size of webpack output files with an interactive zoomable treemap|
 |[compress][compression-webpack-plugin]|`{devServer}`|Prepare compressed versions of assets|
-
+|[lodash][lodash-webpack-plugin]|`opts`|Treeshaking plugin for lodash-es|
 
 [copy-webpack-plugin]: https://github.com/webpack-contrib/copy-webpack-plugin
 [environment-plugin]: https://webpack.js.org/plugins/environment-plugin/
@@ -66,6 +66,7 @@ For now there are 3 commands you can use.
 [mini-css-extract-plugin]: https://github.com/webpack-contrib/mini-css-extract-plugin
 [webpack-bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer
 [compression-webpack-plugin]: https://github.com/webpack-contrib/compression-webpack-plugin
+[lodash-webpack-plugin]: https://github.com/lodash/lodash-webpack-plugin
 
 [cyclejs-usage]: samples/cyclejs/
 [react-favicon-usage]: samples/react-and-favicon/

loaders/css.js

@@ -1,7 +1,8 @@
 const {extractCssPlugin, postcss} = require('./utils');
 
-module.exports = ({env, postcssPresetEnvOptions}) => ({
+module.exports = ({env, postcssOpts}) => ({
   test: /\.css$/,
+  exclude: /node_modules/,
   loader: extractCssPlugin(env)([
     {
       loader: 'css-loader',
@@ -11,6 +12,6 @@ module.exports = ({env, postcssPresetEnvOptions}) => ({
         localIdentName: '[path]___[name]__[local]',
       }
     },
-    postcss({postcssPresetEnvOptions}),
+    postcss(postcssOpts),
   ])
 });

loaders/scss.js

@@ -1,10 +1,11 @@
-const path = require('path');
 const {extractCssPlugin, postcss} = require('./utils');
+const {readFileSync} = require('fs');
 
 module.exports = (
-  {env, cwd, useScssVariables, postcssPresetEnvOptions, scssPath = '/src/scss'}) => (
+  {env, scssVariables, postcssOpts}) => (
   {
     test: /\.scss$/,
+    exclude: /node_modules/,
     loader: extractCssPlugin(env)([
       {
         loader: 'css-loader',
@@ -15,16 +16,11 @@ module.exports = (
           localIdentName: '[path]___[name]__[local]',
         }
       },
-      postcss({postcssPresetEnvOptions}),
+      postcss(postcssOpts),
       {
         loader: 'sass-loader',
         options: {
-          data: `
-            ${useScssVariables && `@import "variables";`}
-          `,
-          includePaths: [
-            path.isAbsolute(scssPath) ? scssPath : path.join(cwd, scssPath)
-          ]
+          data: scssVariables ? readFileSync(scssVariables, 'utf-8') : '',
         }
       }
     ])

loaders/utils.js

@@ -1,19 +1,15 @@
 const {flatten} = require('lodash');
-const postcssPresetEnv = require('postcss-preset-env');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const transitions = require('postcss-will-change-transition');
 
 const extractCssPlugin = env => env === 'production'
   ? use => [MiniCssExtractPlugin.loader, ...use]
   : use => ['style-loader', ...use];
 
-const postcss = ({postcssPresetEnvOptions}) => ({
+const postcss = opts => ({
   loader: 'postcss-loader',
   options: {
-    plugins: () => [
-      postcssPresetEnv(postcssPresetEnvOptions),
-      transitions
-    ]
+    plugins: () => opts || [transitions]
   }
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpacker",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Webpack configuration manager",
   "main": "webpacker.js",
   "bin": {
@@ -50,11 +50,11 @@
     "json-stringify-safe": "^5.0.1",
     "koa-connect": "^2.0.1",
     "lodash": "^4.17.10",
+    "lodash-webpack-plugin": "^0.11.5",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.2",
     "optimize-css-assets-webpack-plugin": "^5.0.0",
     "postcss-loader": "^2.1.6",
-    "postcss-preset-env": "^5.3.0",
     "postcss-will-change-transition": "^1.2.0",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.21.0",

plugins/index.js

@@ -5,6 +5,7 @@ const favicon = require('./favicon');
 const html = require('./html');
 const stats = require('./stats');
 const compress = require('./compress');
+const lodash = require('./lodash');
 
 module.exports = {
   configure,
@@ -13,5 +14,6 @@ module.exports = {
   favicon,
   html,
   stats,
-  compress
+  compress,
+  lodash,
 };

plugins/lodash.js

@@ -0,0 +1,3 @@
+const LodashPlugin = require('lodash-webpack-plugin');
+
+module.exports = opts => new LodashPlugin(opts);

tests/loaders/css.test.js

@@ -21,9 +21,9 @@ describe('CSS loader', () => {
   it('should return the defaults if no options are provided', () =>
     expect(css({})).toMatchObject(defaults)
   );
-  it('should load postcss-preset-env and postcss-will-change-transition', () => {
+  it('should load postcss-will-change-transition', () => {
     const {plugins} = css({}).loader[2].options;
-    return expect(plugins().length).toBe(2);
+    return expect(plugins().length).toBe(1);
   });
   describe('receives an options object to customize the config', () => {
     it('should use MiniCssExtractPlugin if options.env = production', () =>

tests/loaders/scss.test.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const {scss} = require('../../loaders');
 
 describe('SCSS loader', () => {
@@ -21,8 +22,7 @@ describe('SCSS loader', () => {
       }, {
         loader: 'sass-loader',
         options: {
-          data: '\n            undefined\n          ',
-          includePaths: [expect.stringMatching('src/scss')]
+          data: '',
         }
       }
     ],
@@ -38,16 +38,13 @@ describe('SCSS loader', () => {
     it('should use style-loader if options.env != production', () =>
       expect(scss({env: 'development'}).loader[0]).toBe('style-loader')
     );
-    it('allows to enable SCSS variables', () => {
-      const useScssVariables = true;
-      return expect(scss({useScssVariables}).loader[3].options.data)
-      .toBe('\n            @import "variables";\n          ');
-    });
-    it('allows to include SASS files from a different path', () => {
-      const cwd = './path';
-      const scssPath = './scssPath/scss';
-      return expect(scss({cwd, scssPath}).loader[3].options.includePaths)
-      .toContain('path/scssPath/scss');
+    it('allows to not pass SCSS variables path', () =>
+      expect(scss({}).loader[3].options.data).toBe('')
+    );
+    it('allows to pass SCSS variables path', () => {
+      const scssVariables = path.resolve(__dirname, './variables.scss');
+      return expect(scss({scssVariables}).loader[3].options.data)
+      .toBe('$test: 10px;\n');
     });
   });
 });

tests/loaders/variables.scss

@@ -0,0 +1 @@
+$test: 10px;

tests/plugins/lodash.test.js

@@ -0,0 +1,11 @@
+const lodash = require('../../plugins/lodash');
+
+describe('Lodash plugin', () => {
+  const defaults = {
+    options: {},
+  };
+
+  it('should return the plugin with default values', () => {
+    expect(lodash()).toMatchObject(defaults);
+  });
+});