Chore: speeding up webpack (ElemeFE#14484)

* remove unsed dev dependencies * chore: use latest css loaders & fix error * remove postcss-nesting * chore: remove postcss-loader * upgrade copy-webpack-plugin
rikapo · Feb 26, 2019 · 2604c61 · 2604c61
1 parent 969fdd2
commit 2604c61
Show file tree

Hide file tree

Showing 27 changed files with 189 additions and 1,434 deletions.
diff --git a/build/config.js b/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)
-  ];
-};
diff --git a/build/salad.config.json b/build/salad.config.json
diff --git a/build/webpack.common.js b/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*)?$/,

diff --git a/build/webpack.component.js b/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*)?$/,

diff --git a/build/webpack.conf.js b/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*)?$/,

diff --git a/build/webpack.demo.js b/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'

diff --git a/build/webpack.test.js b/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*)?$/,

diff --git a/examples/app.vue b/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>
diff --git a/examples/assets/styles/common.css b/examples/assets/styles/common.css
@@ -14,7 +14,7 @@ html, body {
 #app {
   height: 100%;
 
-  @when component {
+  &.is-component {
     overflow-y: hidden;
 
     .main-cnt {

diff --git a/examples/components/header.vue b/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;
 

diff --git a/examples/docs/en-US/input.md b/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;

diff --git a/examples/docs/en-US/tag.md b/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;

diff --git a/examples/docs/en-US/upload.md b/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;
       }
     }

diff --git a/examples/docs/es/input.md b/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;

diff --git a/examples/docs/es/tag.md b/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;

diff --git a/examples/docs/es/upload.md b/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;
       }
     }

diff --git a/examples/docs/fr-FR/tag.md b/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;

diff --git a/examples/docs/fr-FR/upload.md b/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;
       }
     }

diff --git a/examples/docs/zh-CN/input.md b/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;

diff --git a/examples/docs/zh-CN/tag.md b/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;

diff --git a/examples/docs/zh-CN/upload.md b/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;
       }
     }

diff --git a/examples/entry.js b/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);

diff --git a/examples/pages/template/guide.tpl b/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;

diff --git a/examples/pages/template/resource.tpl b/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;

diff --git a/package.json b/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",

diff --git a/postcss.config.js b/postcss.config.js