feat: support babel cache and typescript cache, default true

Author: hubcarl

config/config.js

@@ -8,6 +8,7 @@ exports.config = {
   buildPath: 'public',
   publicPath: '/public/',
   hashLength: 8,
+  cache: true,
   alias: {},
   packs: {},
   cdn: {},

config/loader.js

@@ -4,11 +4,13 @@ exports.babel = {
   enable: true,
   test: /\.jsx?$/,
   exclude: /node_modules/,
-  use: [
-    {
-      loader: 'babel-loader'
+  use() {
+    const loader = 'babel-loader'
+    if (this.config.cache) {
+      return [this.createCacheLoader(loader, this.config.cache)];
     }
-  ]
+    return [loader];
+  }
 };
 
 exports.eslint = {
@@ -23,7 +25,14 @@ exports.typescript = {
   enable: false,
   test: /\.ts$/,
   exclude: [/node_modules/],
-  use: ['ts-loader']
+  use() {
+    const loaders = ['ts-loader'];
+    if(this.config.cache) {
+      const cacheLoader = this.createCacheLoader('cache-loader', this.config.cache);
+      loaders.unshift(cacheLoader);
+    }
+    return loaders;
+  }
 };
 
 exports.tslint = {

lib/base.js

@@ -240,7 +240,9 @@ class WebpackBaseBuilder extends Config {
       if (Array.isArray(itemLoader.use)) {
         itemLoader.use.forEach((loader, index) => {
           const label = this.utils.getLoaderLabel(loader);
-          const options = this.merge(loaderOptions[label], { options: itemLoader.options });
+          const mLabel = this.loaderKeyLabelMapping[name];
+          const configOptions = itemLoader.options && (label === mLabel || label === name) ? itemLoader.options : {};
+          const options = this.merge(loaderOptions[label], { options: configOptions });
           if (this.utils.isString(loader)) {
             itemLoader.use.splice(index, 1, this.merge({ loader }, options));
           } else if (this.utils.isObject(loader) && this.utils.isString(loader.loader)) {
@@ -484,6 +486,12 @@ class WebpackBaseBuilder extends Config {
     return { loader: 'postcss-loader', options };
   }
 
+  createCacheLoader(loader, cacheOptions) {
+    const cacheDirectory = this.utils.getCacheLoaderInfoPath(loader, this.env);
+    const options = this.utils.isObject(cacheOptions) ? this.merge({ cacheDirectory }, cacheOptions) : { cacheDirectory };
+    return { loader, options };
+  }
+
   createDllPlugin(dll) {
     dll = dll || this.config.dll;
     const dllArray = WebpackBaseBuilder.getDllConfig(dll);

lib/builder.js

@@ -39,6 +39,7 @@ exports.getDllWebpackConfig = (config, option = {}) => {
     const prefix = config.prefix;
     const resolveLoader = config.resolveLoader;
     const cdn = config.cdn;
+    const cache = config.cache;
     const configLoaders = config.loaders || {};
     const configPlugins = config.plugins || {};
     const loaders = {};
@@ -56,7 +57,7 @@ exports.getDllWebpackConfig = (config, option = {}) => {
       }
     }
     dllArray.forEach(item => {
-      const builderConfig = Object.assign({}, dllConfig, { prefix, entry: {}, dll: item, publicPath, buildPath, alias, externals, resolveLoader, install, cdn, loaders, plugins }, item.webpackConfig);
+      const builderConfig = Object.assign({}, dllConfig, { cache, prefix, entry: {}, dll: item, publicPath, buildPath, alias, externals, resolveLoader, install, cdn, loaders, plugins }, item.webpackConfig);
       if (option.onlyView || utils.checkDllUpdate(config, item)) {
         dllWebpackConfig.push(new WebpackDllBuilder(builderConfig).create());
       }

lib/config.js

@@ -24,6 +24,14 @@ class Config {
       'context', 'target', 'node', 'output', 'externals', 'resolve', 'watch', 'watchOptions', 'amd',
       'resolveLoader', 'devServer', 'performance', 'module', 'cache', 'profile', 'stats', 'cache', 'optimization'
     ];
+    this.loaderKeyLabelMapping = {
+      scss: 'sass',
+      typescript: 'ts',
+      urlimage: 'url',
+      urlmedia: 'url',
+      urlfont: 'url',
+      nunjucks: 'nunjucks-html'
+    };
     this.logger = new Logger(config.logger, this);
     this.adapter = new Adapter(this);
     this.initialize(config);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easywebpack",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "基于 Webpack 的前端构建工程化解决方案",
   "keywords": [
     "webpack",
@@ -15,6 +15,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^7.1.2",
+    "cache-loader": "^1.2.2",
     "chalk": "^2.0.1",
     "cross-spawn": "^5.1.0",
     "css-loader": "^0.28.4",

test/base.test.js

@@ -5,7 +5,7 @@ const webpack = WebpackTool.webpack;
 const merge = WebpackTool.merge;
 const WebpackBaseBuilder = require('../lib/base');
 const path = require('path').posix;
-
+const utils = require('../utils/utils');
 // http://chaijs.com/api/bdd/
 function createBuilder(config) {
   const builder = new WebpackBaseBuilder(config);
@@ -16,7 +16,14 @@ function createBuilder(config) {
   });
   return builder;
 }
-
+function getLoaderByName(name, rules) {
+  const loaderName = `${name}-loader`;
+  return rules.filter(rule => {
+    return rule.use.some(loader => {
+      return loaderName === loader || (typeof loader === 'object' && loader.loader === loaderName);
+    });
+  });
+}
 describe('base.test.js', () => {
   before(() => {
   });
@@ -106,5 +113,50 @@ describe('base.test.js', () => {
       expect(webpackConfig.output.filename).to.equal('static/js/[name].js');
       expect(webpackConfig.output.chunkFilename).to.equal('static/js/chunk/[name].js');
   });
+  describe('#webpack cache loader test', () => {
+    it('should create babel cache loader disable test', () => {
+      const builder = createBuilder({
+        cache: false,
+      });
+      const webpackConfig = builder.create();
+      const cacheLoader = getLoaderByName('cache', webpackConfig.module.rules);
+      expect(cacheLoader.length).to.equal(0);
+    });
+    it('should create babel typescript cache loader test', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('cache-loader')
+      const builder = createBuilder({
+        loaders:{
+          typescript: true
+        }
+      });
+      const webpackConfig = builder.create();
+      const cacheLoader = getLoaderByName('cache', webpackConfig.module.rules);
+      expect(cacheLoader.length).to.equal(1);
+      expect(cacheLoader[0].use.length).to.equal(2);
+      expect(cacheLoader[0].use[0].loader).to.equal('cache-loader');
+      expect(cacheLoader[0].use[0].options.cacheDirectory).to.equal(cacheDirectory);
+      expect(cacheLoader[0].use[1].loader).to.equal('ts-loader');
+    });
+    it('should create babel typescript config test', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('cache-loader')
+      const builder = createBuilder({
+        loaders:{
+          typescript: {
+            options:{
+              configFile: __dirname
+            }
+          }
+        }
+      });
+      const webpackConfig = builder.create();
+      const cacheLoader = getLoaderByName('cache', webpackConfig.module.rules);
+      expect(cacheLoader.length).to.equal(1);
+      expect(cacheLoader[0].use.length).to.equal(2);
+      expect(cacheLoader[0].use[0].loader).to.equal('cache-loader');
+      expect(cacheLoader[0].use[0].options.cacheDirectory).to.equal(cacheDirectory);
+      expect(cacheLoader[0].use[1].loader).to.equal('ts-loader');
+      expect(cacheLoader[0].use[1].options.configFile).to.equal(__dirname);
+    });
+  });
 });
 });

test/client.test.js

@@ -341,7 +341,8 @@ describe('client.test.js', () => {
       const tsLoader = getLoaderByName('ts', webpackConfig.module.rules);
       const eslint = getLoaderByName('eslint', webpackConfig.module.rules);
       const tslint = getLoaderByName('tslint', webpackConfig.module.rules);
-      expect(tsLoader.use[0].loader).to.equal('ts-loader');
+      expect(tsLoader.use[0].loader).to.equal('cache-loader');
+      expect(tsLoader.use[1].loader).to.equal('ts-loader');
       expect(eslint.use[0].loader).to.equal('eslint-loader');
       expect(tslint.use[0].loader).to.equal('tslint-loader');
       expect(webpackConfig.resolve.extensions).to.include.members(['.ts', '.js']);
@@ -364,8 +365,9 @@ describe('client.test.js', () => {
       const tslint = getLoaderByName('tslint', webpackConfig.module.rules);
       expect(eslint).to.be.undefined;
       expect(tslint.use[0].loader).to.equal('tslint-loader');
-      expect(tsLoader.use[0].loader).to.equal('ts-loader');
-      expect(tsLoader.use[0].options.configFile).to.equal(configFile);
+      expect(tsLoader.use[0].loader).to.equal('cache-loader');
+      expect(tsLoader.use[1].loader).to.equal('ts-loader');
+      expect(tsLoader.use[1].options.configFile).to.equal(configFile);
     });
 
     it('should tslint enable test', () => {
@@ -383,6 +385,7 @@ describe('client.test.js', () => {
       const configFile = path.resolve(process.cwd(), './app/web/tsconfig.json');
       const builder = createBuilder({
         egg: true,
+        cache: false,
         loaders:{
           typescript: true
         }

test/loader.test.js

@@ -3,6 +3,7 @@ const expect = require('chai').expect;
 const WebpackTool = require('webpack-tool');
 const webpack = WebpackTool.webpack;
 const merge = WebpackTool.merge;
+const utils = require('../utils/utils');
 const WebpackBaseBuilder = require('../lib/base');
 const WebpackClientBuilder = require('../lib/client');
 const path = require('path').posix;
@@ -35,7 +36,14 @@ function getLoaderByName(name, rules) {
     });
   });
 }
-
+function getLoadersByName(name, rules) {
+  const loaderName = `${name}-loader`;
+  return rules.filter(rule => {
+    return rule.use.some(loader => {
+      return loaderName === loader || (typeof loader === 'object' && loader.loader === loaderName);
+    });
+  });
+}
 function getLoaderByTest(test, rules) {
   return rules.find(rule => {
     return rule.test.toString() === test.toString();
@@ -81,6 +89,7 @@ describe('loader.test.js', () => {
 
     it('should loader merge options test', () => {
       const config = {
+        cache: false,
         loaders: {
           eslint: {
             options: {
@@ -262,6 +271,7 @@ describe('loader.test.js', () => {
     expect(vuehtml.use[0].loader).to.equal('vue-html-loader');
     expect(vuehtml.use[0].options.test).to.true;
   });
+  
 
   describe('#webpack feature loader test', () => {
     it('should postcss-loader default config', () => {
@@ -305,4 +315,61 @@ describe('loader.test.js', () => {
       expect(postcssLoader.options.sourceMap).to.be.false;
     });
   });
+
+  describe('#webpack feature url loader test', () => {
+    it('should url-loader default config', () => {
+      const builder = createBuilder();
+      const webpackConfig = builder.create();
+      const urlLoaders = getLoadersByName('url', webpackConfig.module.rules);
+      expect(urlLoaders.length).to.equal(3);
+    });
+    it('should url-loader default config', () => {
+      const builder = createBuilder({
+        loaders:{
+          urlmedia:false,
+          urlfont: false,
+          urlimage: {
+            options:{
+              limit: 10000
+            }
+          }
+        }
+      });
+      const webpackConfig = builder.create();
+      const urlLoader = getLoaderByName('url', webpackConfig.module.rules);
+      expect(urlLoader.use[0].options.limit).to.equal(10000);
+    });
+  });
+  describe('#webpack babel loader test', () => {
+    it('should babel-loader default config', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
+      const builder = createBuilder();
+      const webpackConfig = builder.create();
+      const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
+      expect(babelLoader.use.length).to.equal(1);
+      expect(babelLoader.use[0].options.cacheDirectory).to.equal(cacheDirectory);
+    });
+  });
+  describe('#webpack config cache test', () => {
+    it('should config cache false config', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
+      const builder = createBuilder({
+        cache: false
+      });
+      const webpackConfig = builder.create();
+      const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
+      expect(babelLoader.use.length).to.equal(1);
+      expect(babelLoader.use[0].options.cacheDirectory).to.be.undefined
+    });
+    it('should config cache undefined config', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
+      const builder = createBuilder({
+        cache: undefined
+      });
+      const webpackConfig = builder.create();
+      const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
+      expect(babelLoader.use.length).to.equal(1);
+      expect(babelLoader.use[0].options.cacheDirectory).to.equal(cacheDirectory);
+    });
+  });
 });

test/server.test.js

@@ -125,6 +125,7 @@ describe('server.test.js', () => {
   it('should typescript config test', () => {
     const configFile = path.resolve(__dirname, './app/web/tsconfig.json');
     const builder = createBuilder({
+      cache: false,
       loaders:{
         typescript: {
           options:{