refactor: load a webpack loader in a modular way

added webpack-bundle-analyzer by the way

Author: Yingkaixiang

.storybook/webpack.config.js

@@ -1,5 +1,8 @@
-const merge = require('webpack-merge');
+const tsLoader = require('../build/loaders/ts-loader');
+const sassLoader = require('../build/loaders/sass-loader');
 
-const webpackBaseConfig = require('../build/webpack.css');
-
-module.exports = merge(webpackBaseConfig, {});
+module.exports = {
+  module: {
+    rules: [tsLoader, sassLoader],
+  },
+};

README.md

@@ -28,6 +28,7 @@
   - [x] 代码风格检测
   - [x] 单元测试
   - [x] commit message 提交规范
+- [x] 支持打包文件大小分析
 
 ## 规范
 
@@ -154,4 +155,9 @@ module.exports = {
 
 组件库本身有一套自己的 CSS 命名规则，保证唯一的命名空间以及可以方便的进行修改。所以 scoped 和 CSS Module 对于组件库来说是没有意义的。但是在 .vue 文件中使用 `<style></style>` 标签的话 `vue-loader` 一定会把相关的 CSS 处理逻辑（如模拟 scoped 特性）打包进最终的文件里。所以采用分离的方式编写 CSS，也能做到组件库样式的统一管理。
 
-> 如果你有什么建议或者想法可以给我发邮件 rubykaikai@gmail.com 来一起探讨哦！~
+> 如果你有什么建议或者想法可以给我发邮件 rubykaikai@gmail.com 来一起探讨哦！~
+
+## TODO
+
+* webpack 插件自动上传图片
+* 修改使用文档，加入 CI/CD greenkeeper 的配置方法

bin/qiniu-deploy.js

@@ -2,7 +2,7 @@ const path = require('path');
 const glob = require('glob');
 const mime = require('mime-types');
 
-const upload = require('../build/qiniu');
+const upload = require('../build/utils/qiniu');
 
 const dirPath = path.resolve(
   __dirname,

build/loaders/babel-loader.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  test: /\.js$/,
+  loader: 'babel-loader',
+  include: path.resolve(__dirname, '../components'),
+};

build/loaders/sass-loader.js

@@ -0,0 +1,28 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const TARGET = process.env.npm_lifecycle_event;
+
+module.exports = {
+  test: /\.scss$/,
+  use: [
+    {
+      loader:
+        TARGET.indexOf('storybook') !== -1
+          ? 'vue-style-loader'
+          : MiniCssExtractPlugin.loader,
+      options: {
+        esModule: true,
+      },
+    },
+    {
+      loader: 'css-loader',
+    },
+    'postcss-loader',
+    {
+      loader: 'sass-loader',
+      options: {
+        prependData: `$color: green;`,
+      },
+    },
+  ],
+};

build/loaders/ts-loader.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.ts$/,
+  loader: 'ts-loader',
+  options: { appendTsSuffixTo: [/\.vue$/] },
+};

build/loaders/url-loader.js

@@ -0,0 +1,11 @@
+module.exports = {
+  test: /\.(png|jpe?g|gif)$/i,
+  use: [
+    {
+      loader: 'url-loader',
+      options: {
+        limit: 1024,
+      },
+    },
+  ],
+};

build/loaders/vue-loader.js

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /\.vue$/,
+  loader: 'vue-loader',
+};

build/util.js renamed to build/utils/entry.js

@@ -1,23 +1,18 @@
 const fs = require('fs');
-const path = require("path");
-
-function resolve(filepath) {
-  return path.resolve(__dirname, filepath);
-}
+const path = require('path');
 
 function getEntries() {
-  const dir = resolve("../components");
+  const dir = path.resolve(__dirname, '../../components');
   const packages = fs.readdirSync(dir);
   const entries = {};
   packages.forEach(function(pkg) {
     const dirpath = path.join(dir, pkg);
     const stat = fs.statSync(dirpath);
     if (stat && stat.isDirectory()) {
-      entries[pkg] = path.join(dirpath, "index.js");
+      entries[pkg] = path.join(dirpath, 'index.js');
     }
   });
   return entries;
 }
 
-exports.resolve = resolve;
 exports.getEntries = getEntries;