Chore: speeding up webpack (#14484)

* remove unsed dev dependencies

* chore: use latest css loaders & fix error

* remove postcss-nesting

* chore: remove postcss-loader

* upgrade copy-webpack-plugin

build/config.js

@@ -2,7 +2,6 @@ var path = require('path');
 var fs = require('fs');
 var nodeExternals = require('webpack-node-externals');
 var Components = require('../components.json');
-var saladConfig = require('./salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
@@ -48,12 +47,3 @@ exports.vue = {
 };
 
 exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date.\js/;
-
-exports.postcss = function(webapck) {
-  saladConfig.features.partialImport = {
-    addDependencyTo: webapck
-  };
-  return [
-    require('postcss-salad')(saladConfig)
-  ];
-};

build/salad.config.json

-{
-  "browsers": ["ie > 8", "last 2 versions"],
-  "features": {
-    "bem": {
-      "shortcuts": {
-        "component": "b",
-        "modifier": "m",
-        "descendent": "e"
-      },
-      "separators": {
-        "descendent": "__",
-        "modifier": "--"
-      }
-    }
-  }
-}

build/webpack.common.js

@@ -52,11 +52,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        loaders: ['style-loader', 'css-loader']
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

build/webpack.component.js

@@ -47,11 +47,7 @@ const webpackConfig = {
       },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        loaders: ['style-loader', 'css-loader']
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

build/webpack.conf.js

@@ -35,7 +35,7 @@ module.exports = {
           output: {
             comments: false
           }
-        },
+        }
       })
     ]
   },
@@ -64,11 +64,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        loaders: ['style-loader', 'css-loader']
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

build/webpack.demo.js

@@ -84,16 +84,8 @@ const webpackConfig = {
         }
       },
       {
-        test: /\.css$/,
-        loaders: [
-          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'postcss-loader'
-        ]
-      },
-      {
-        test: /\.scss$/,
-        loaders: [
+        test: /\.(scss|css)$/,
+        use: [
           isProd ? MiniCssExtractPlugin.loader : 'style-loader',
           'css-loader',
           'sass-loader'

build/webpack.test.js

@@ -22,7 +22,6 @@ const webpackConfig = {
     }),
     modules: ['node_modules']
   },
-  devtool: '#inline-source-map',
   module: {
     rules: [
       {
@@ -42,7 +41,7 @@ const webpackConfig = {
       },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+        loaders: ['style-loader', 'css-loader']
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

examples/app.vue

@@ -84,9 +84,3 @@
     }
   };
 </script>
-
-<style>
-  @import 'highlight.js/styles/color-brewer.css';
-  @import 'assets/styles/common.css';
-  @import 'assets/styles/fonts/style.css';
-</style>

examples/assets/styles/common.css

@@ -14,7 +14,7 @@ html, body {
 #app {
   height: 100%;
   
-  @when component {
+  &.is-component {
     overflow-y: hidden;
 
     .main-cnt {

examples/components/header.vue

@@ -10,7 +10,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    line-height: @height;
+    line-height: 80px;
     z-index: 100;
     position: relative;
 

examples/docs/en-US/input.md

@@ -127,7 +127,8 @@
   .el-autocomplete-suggestion.my-autocomplete {
     li {
       line-height: normal;
-      padding: 7px *;
+      padding-top: 7px;
+      padding-bottom: 7px;
 
       .name {
         text-overflow: ellipsis;

examples/docs/en-US/tag.md

@@ -47,7 +47,8 @@
       margin-left: 10px;
       height: 32px;
       line-height: 30px;
-      padding: 0 *;
+      padding-top: 0;
+      padding-bottom: 0;
     }
     .input-new-tag {
       width: 90px;

examples/docs/en-US/upload.md

@@ -26,13 +26,13 @@
         font-size: 28px;
         color: #8c939d;
         width: 178px;
-        height: @width;
-        line-height: @height;
+        height: 178px;
+        line-height: 178px;
         text-align: center;
       }
       .avatar {
         width: 178px;
-        height: @width;
+        height: 178px;
         display: block;
       }
     }

examples/docs/es/input.md

@@ -127,7 +127,8 @@
   .el-autocomplete-suggestion.my-autocomplete {
     li {
       line-height: normal;
-      padding: 7px *;
+      padding-top: 7px;
+      padding-bottom: 7px;
 
       .name {
         text-overflow: ellipsis;

examples/docs/es/tag.md

@@ -47,7 +47,8 @@
       margin-left: 10px;
       height: 32px;
       line-height: 30px;
-      padding: 0 *;
+      padding-top: 0;
+      padding-bottom: 0;
     }
     .input-new-tag {
       width: 90px;

examples/docs/es/upload.md

@@ -26,13 +26,13 @@
         font-size: 28px;
         color: #8c939d;
         width: 178px;
-        height: @width;
-        line-height: @height;
+        height: 178px;
+        line-height: 178px;
         text-align: center;
       }
       .avatar {
         width: 178px;
-        height: @width;
+        height: 178px;
         display: block;
       }
     }

examples/docs/fr-FR/tag.md

@@ -47,7 +47,8 @@
       margin-left: 10px;
       height: 32px;
       line-height: 30px;
-      padding: 0 *;
+      padding-top: 0;
+      padding-bottom: 0;
     }
     .input-new-tag {
       width: 90px;

examples/docs/fr-FR/upload.md

@@ -26,13 +26,13 @@
         font-size: 28px;
         color: #8c939d;
         width: 178px;
-        height: @width;
-        line-height: @height;
+        height: 178px;
+        line-height: 178px;
         text-align: center;
       }
       .avatar {
         width: 178px;
-        height: @width;
+        height: 178px;
         display: block;
       }
     }

examples/docs/zh-CN/input.md

@@ -158,7 +158,8 @@
   .el-autocomplete-suggestion.my-autocomplete {
     li {
       line-height: normal;
-      padding: 7px *;
+      padding-top: 7px;
+      padding-bottom: 7px;
 
       .name {
         text-overflow: ellipsis;

examples/docs/zh-CN/tag.md

@@ -47,7 +47,8 @@
       margin-left: 10px;
       height: 32px;
       line-height: 30px;
-      padding: 0 *;
+      padding-top: 0;
+      padding-bottom: 0;
     }
     .input-new-tag {
       width: 90px;

examples/docs/zh-CN/upload.md

@@ -26,13 +26,13 @@
         font-size: 28px;
         color: #8c939d;
         width: 178px;
-        height: @width;
-        line-height: @height;
+        height: 178px;
+        line-height: 178px;
         text-align: center;
       }
       .avatar {
         width: 178px;
-        height: @width;
+        height: 178px;
         display: block;
       }
     }

examples/entry.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import entry from './app';
 import VueRouter from 'vue-router';
 import Element from 'main/index.js';
-import 'packages/theme-chalk/src/index.scss';
 import routes from './route.config';
 import demoBlock from './components/demo-block';
 import MainFooter from './components/footer';
@@ -11,6 +10,11 @@ import SideNav from './components/side-nav';
 import FooterNav from './components/footer-nav';
 import title from './i18n/title';
 
+import 'packages/theme-chalk/src/index.scss';
+import 'highlight.js/styles/color-brewer.css';
+import './assets/styles/common.css';
+import './assets/styles/fonts/style.css';
+
 Vue.use(Element);
 Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);

examples/pages/template/guide.tpl

@@ -35,7 +35,7 @@
           content: '';
           display: inline-block;
           width: 4px;
-          height: @width;
+          height: 4px;
           border-radius: 50%;
           vertical-align: middle;
           background-color: #5e6d82;

examples/pages/template/resource.tpl

@@ -87,7 +87,7 @@
       height: 42px;
       width: 190px;
       display: inline-block;
-      line-height: @height;
+      line-height: 42px;
       font-size: 14px;
       background-color: #409EFF;
       color: #fff;

package.json

@@ -73,11 +73,11 @@
     "chai": "^3.5.0",
     "cheerio": "^0.18.0",
     "chokidar": "^1.7.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^5.0.0",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "^2.1.0",
     "es6-promise": "^4.0.5",
     "eslint": "4.14.0",
     "eslint-config-elemefe": "0.1.1",
@@ -89,10 +89,8 @@
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^4.0.0",
     "gulp-cssmin": "^0.1.7",
-    "gulp-postcss": "^6.1.1",
-    "gulp-sass": "^3.1.0",
+    "gulp-sass": "^4.0.2",
     "highlight.js": "^9.3.0",
-    "html-loader": "^0.5.1",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
@@ -109,19 +107,17 @@
     "markdown-it-container": "^2.0.0",
     "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^3.1.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "perspective.js": "^1.0.0",
-    "postcss": "^5.1.2",
-    "postcss-loader": "^2.1.5",
-    "postcss-salad": "^2.0.1",
+    "postcss": "^7.0.14",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.1.0",
     "select-version-cli": "^0.0.2",
     "sinon": "^1.17.6",
     "sinon-chai": "^2.8.0",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.23.1",
     "transliteration": "^1.1.11",
     "uglifyjs-webpack-plugin": "^2.1.1",
     "uppercamelcase": "^1.1.0",

postcss.config.js

-module.exports = {
-  plugins: {
-    'postcss-salad': {
-      browsers: ['ie > 8', 'last 2 versions'],
-      features: {
-        bem: {
-          shortcuts: {
-            component: 'b',
-            modifier: 'm',
-            descendent: 'e'
-          },
-          separators: {
-            descendent: '__',
-            modifier: '--'
-          }
-        }
-      }
-    }
-  }
-};