feat: auto set sourceMap when devtool set

easy-team · Apr 26, 2018 · 708cce8 · 708cce8
1 parent 888c8e5
commit 708cce8
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 2 deletions.
diff --git a/config/loader.js b/config/loader.js
@@ -60,7 +60,7 @@ exports.tslint = {
 
 exports.css = {
   enable: true,
-  test: /\.css$/,
+  test: /\.css/,
   use: ['css-loader'],
   postcss: true,
   framework: true

diff --git a/lib/client.js b/lib/client.js
@@ -17,6 +17,31 @@ class WebpackClientBuilder extends WebpackBaseBuilder {
     this.setCreateQueue(this.createHotEntry);
   }
 
+  prepareLoaderOption(loaders, loaderOptions) {
+    super.prepareLoaderOption(loaders, loaderOptions);
+    // 自动设置sourceMap
+    if (this.config.devtool) {
+      const options = { sourceMap: true };
+      const cssLoaderOptions = this.getCssLoaderOptions();
+      Object.keys(loaders).forEach(name => {
+        const itemLoader = loaders[name];
+        if (Array.isArray(itemLoader.use)) {
+          itemLoader.use.forEach((loader, index) => {
+            if (this.utils.isObject(loader) && this.utils.isString(loader.loader)) {
+              if (this.sourceMapLoaders.indexOf(loader.loader) > -1) {
+                if (loader.loader === 'css-loader') {
+                  itemLoader.use[index] = this.merge({ options }, { options: cssLoaderOptions }, itemLoader.use[index]);
+                } else {
+                  itemLoader.use[index] = this.merge({ options }, itemLoader.use[index]);
+                }
+              }
+            }
+          });
+        }
+      });
+    }
+  }
+
   setCommonsChunkLib(entry, name = 'common') {
     const lib = this.config.lib;
     if (entry) {

diff --git a/lib/config.js b/lib/config.js
@@ -29,6 +29,12 @@ class Config {
       'context', 'target', 'node', 'output', 'externals', 'resolve', 'watch', 'watchOptions', 'amd',
       'resolveLoader', 'devServer', 'performance', 'module', 'cache', 'profile', 'stats', 'cache', 'optimization'
     ];
+    this.sourceMapLoaders = [
+      'css-loader', 
+      'sass-loader', 
+      'less-loader', 
+      'stylus-loader'
+    ];
     this.loaderKeyLabelMapping = {
       scss: 'sass',
       typescript: 'ts',
@@ -246,6 +252,17 @@ class Config {
     return this.mergeLoader(this.config.loaders, defaultLoaders)[name];
   }
 
+  getCssLoaderOptions() {
+    const itemLoader = this.getLoaderByName('css');
+    if (itemLoader && itemLoader.use) {
+      const cssLoader = itemLoader.use.find(loader => {
+        return this.utils.isObject(loader) && loader.loader === 'css-loader';
+      });
+      return cssLoader && cssLoader.options;
+    }
+    return null;
+  }
+
   getPluginByName(name) {
     const defaultPlugins = this.utils.cloneDeep(this.plugins);
     const plugins = this.mergePlugin(this.config.plugins, defaultPlugins);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easywebpack",
-  "version": "4.2.5",
+  "version": "4.4.0",
   "description": "基于 Webpack 的前端构建工程化解决方案",
   "keywords": [
     "webpack",

diff --git a/test/client.test.js b/test/client.test.js
@@ -534,4 +534,86 @@ describe('client.test.js', () => {
       expect(scssLoader.use[3].options.includePaths.length).to.equal(2);
     });
   });
+  describe('#webpack devtool sourceMap test', () => {
+    it('should devtool set sourceMap test', () => {
+      const builder = createBuilder({
+        devtool: 'source-map',
+        loaders: {
+          sass: true,
+          scss: true,
+          less: true,
+          stylus: true,
+        }
+      });
+      const webpackConfig = builder.create();
+      const cssLoader = getLoaderByName('css', webpackConfig.module.rules, /\.css/);
+      const sassLoader = getLoaderByName('sass', webpackConfig.module.rules, /\.sass/);
+      const scssLoader = getLoaderByName('sass', webpackConfig.module.rules, /\.scss/);
+      const LessLoader = getLoaderByName('less', webpackConfig.module.rules, /\.less/);
+      const stylusLoader = getLoaderByName('stylus', webpackConfig.module.rules, /\.stylus/);
+      expect(cssLoader.use[1].options.sourceMap).to.be.true;
+
+      expect(sassLoader.use[1].options.sourceMap).to.be.true;
+      expect(sassLoader.use[3].options.sourceMap).to.be.true;
+
+      expect(scssLoader.use[1].options.sourceMap).to.be.true;
+      expect(scssLoader.use[3].options.sourceMap).to.be.true;
+
+      expect(LessLoader.use[1].options.sourceMap).to.be.true;
+      expect(LessLoader.use[3].options.sourceMap).to.be.true;
+
+      expect(stylusLoader.use[1].options.sourceMap).to.be.true;
+      expect(stylusLoader.use[3].options.sourceMap).to.be.true;
+    });
+    it('should devtool set sourceMap override test', () => {
+      const builder = createBuilder({
+        devtool: 'source-map',
+        loaders: {
+          css: {
+            options:{
+              sourceMap: false,
+            }
+          },
+          scss:  {
+            options:{
+              sourceMap: false,
+            }
+          },
+          sass:  {
+            options:{
+              sourceMap: false,
+            }
+          },
+          less:  {
+            options:{
+              sourceMap: false,
+            }
+          },
+          stylus:  {
+            options:{
+              sourceMap: false,
+            }
+          },
+        }
+      });
+      const webpackConfig = builder.create();
+      const cssLoader = getLoaderByName('css', webpackConfig.module.rules, /\.css/);
+      const sassLoader = getLoaderByName('sass', webpackConfig.module.rules, /\.sass/);
+      const scssLoader = getLoaderByName('sass', webpackConfig.module.rules, /\.scss/);
+      const lessLoader = getLoaderByName('less', webpackConfig.module.rules, /\.less/);
+      const stylusLoader = getLoaderByName('stylus', webpackConfig.module.rules, /\.stylus/);
+      expect(cssLoader.use[1].options.sourceMap).to.be.false;
+      expect(sassLoader.use[1].options.sourceMap).to.be.false;
+      expect(sassLoader.use[3].options.sourceMap).to.be.false;
+
+      expect(scssLoader.use[1].options.sourceMap).to.be.false;
+      expect(scssLoader.use[3].options.sourceMap).to.be.false;
+
+      expect(lessLoader.use[1].options.sourceMap).to.be.false;
+      expect(lessLoader.use[3].options.sourceMap).to.be.false;
+
+      expect(stylusLoader.use[1].options.sourceMap).to.be.false;
+      expect(stylusLoader.use[3].options.sourceMap).to.be.false;
+    });
+  });
 });