Merge pull request #10 from dazjean/custom-webpack-configuration

feat: suport custom configure webpack

Author: dazjean

doc/react/webpackconfig.md

@@ -1,59 +1,66 @@
 
 # webpack
+
 srejs基于webpack@4.0+,Bable@7.0+进行项目编译,默认集成配置项如下
+
 ## loader
+
 - babel-loader
 - less-loader
 - css-loader
 - sass-loader
 - postcss-loader
 - url-loader
 
-## alias
+## alias默认别名
 
 ```js
 alias: {
+        @: rootDir,
         components: rootDir + '/components',
         images: rootDir + '/images',
-        mock: rootDir + '/mock',
-        skin: rootDir + '/skin',
-        utils: rootDir + '/utils',
-        config: rootDir + '/config'
     }
 ```
 
 ## DefinePlugin
+
 开发者在js中通过`process.env.NODE_ENV`可以进行环境的区分。
-```
+
+```shell
 'process.env': NODE_ENV: JSON.stringify(dev ? 'development' : 'production')
 ```
 
-## devServer
-- `port:8080`
-- `hot:true`
-- `contentBase: ${rootDir}`
+# 覆盖或者新增webpack配置
+
+srejs支持自定义webpack配置，在项目根目录下创建webpack.config.js。文件支持导出对象或者函数。
+
+- 函数 【推荐】
+函数接受两个参数，第一个为框架内置webpack配置对象;第二个参数可区分ssr和csr模式。
 
-# 自定义webpack
-srejs支持自定义webpack中的指定配置项 
+```js
+module.exports = (configureWebpack, type) => {
+    if (type == 'ssr') {
+        //服务端渲染配置
+    } else if (type === 'csr') {
+        //客户端构建配置
+        // configureWebpack.module.rules[0].exclude = /\/node_module\/!(antd.*)/;
+    }
 
-## 支持的配置项
+    return configureWebpack;
+};
 ```
-// webpack.config.js
+
+- 对象
+对象配置属性将通过webpack-merge和框架内置属性进行合并。此方法适用于同时设置客户端和服务端渲染模式相同的配置。
+
+```js
 module.exports = {
-    loader: {
-        js: [],
-        jsx: [],
-        css: [],
-        scss: [],
-        less: [],
-        img: []
-    }, // 新增的loader框架默认loader配置之后执行
-    externals: {
-    }, 
-    extensions: [],
-    alias: {
-        images: path.join(process.cwd() + '/src/images')
-    },
-    plugins: []
- };
-```
+    // module
+    module:{
+        rules:[
+            // other loader
+        ]
+    }
+}
+
+```

packages/app/webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = (configureWebpack, type) => {
+    if (type == 'ssr') {
+        //服务端渲染配置
+    } else if (type === 'csr') {
+        //客户端构建配置
+        // configureWebpack.module.rules[0].exclude = /\/node_module\/!(antd.*)/;
+    }
+
+    return configureWebpack;
+};

packages/common/src/config.js

@@ -12,7 +12,7 @@ export const cacheDir = join(cwd + '/.ssr/cache');
 export const outPutDir = join(cwd + '/.ssr/output');
 export const serverDir = join(cwd + '/dist/server');
 export const clientDir = join(cwd + '/dist/client');
-export const webpackConfigPath = join(cwd + './webpack.config.js');
+export const webpackConfigPath = join(cwd + '/webpack.config.js');
 export const SSRKEY = Symbol('SSR');
 
 const newOptionsPath = path.resolve(cwd, './config/ssr.config.js');

packages/react-webpack/package.json

@@ -68,6 +68,7 @@
 		"terser-webpack-plugin": "^4.2.3",
 		"url-loader": "^4.1.1",
 		"webpack": "^4.35.0",
+		"webpack-merge":"5.8.0",
 		"webpack-bundle-analyzer": "^4.4.2",
 		"webpack-dev-server": "^3.7.2",
 		"webpack-node-externals": "^3.0.0"

packages/react-webpack/src/react/base.js

@@ -7,7 +7,6 @@ import { cwd, clientDir, getCoreConfig, getOptions, isDev } from '@srejs/common'
 import { loaderRules } from './loader';
 import { getPlugin } from './plugin';
 import { getEntry, initEntry } from './entry';
-import combine from './combine';
 
 const { prefixCDN } = getCoreConfig();
 const rootDir = getOptions('rootDir');
@@ -98,5 +97,5 @@ export function getBaseconfig(page, isServer = false, hotReload = false) {
             }
         }
     };
-    return combine(config);
+    return config;
 }

packages/react-webpack/src/react/combine.js

@@ -1,131 +1,23 @@
 import fs from 'fs';
+import merger from 'webpack-merge';
 import { webpackConfigPath } from '@srejs/common';
 
-const loaderDefaultArr = [
-    '.js',
-    '.jsx',
-    '.ts',
-    '.tsx',
-    '.css',
-    '.scss',
-    '.less',
-    '.png',
-    '.jpg',
-    '.jpeg',
-    '.gif',
-    '.svg'
-];
-function isSameLoader(loader1, loader2) {
-    const loader1Name = typeof loader1 === 'string' ? loader1 : loader1.loader;
-    const loader2Name = typeof loader2 === 'string' ? loader2 : loader2.loader;
-    return loader1Name === loader2Name;
-}
-function mergeLoader(before, item) {
-    if (item && item.length) {
-        //如果有则覆盖，没有则添加 双指针：一个beforeIndex指向原有默认配置，一个itemIndex指向用户配置
-        //1.loader相同 beforeIndex++ && itemIndex++,覆盖
-        //2.loader不相同 beforeIndex++,添加
-        const beforeLength = before.use.length,
-            itemLength = item.length;
-        let beforeIndex = 0,
-            itemIndex = 0;
-        while (beforeIndex < beforeLength && itemIndex < itemLength) {
-            if (isSameLoader(before.use[beforeIndex], item[itemIndex])) {
-                before.use[beforeIndex] = item[itemIndex];
-                beforeIndex++;
-                itemIndex++;
-            } else {
-                beforeIndex++;
-            }
-        }
-        if (itemIndex < itemLength) {
-            //用户配置
-            before.use.push(...item.slice(itemIndex));
-        }
-    }
-}
-//loader单独处理
-function loaderConfig(userConfigLoader, config) {
-    //添加loader
-    let defaultLoader = config.module.rules;
-    userConfigLoader &&
-        Object.entries(userConfigLoader).map(([key, item]) => {
-            switch (key) {
-                case 'js':
-                    mergeLoader(defaultLoader[0], item);
-                    break;
-                case 'jsx':
-                    mergeLoader(defaultLoader[1], item);
-                    break;
-                case 'ts':
-                    mergeLoader(defaultLoader[2], item);
-                    break;
-                case 'tsx':
-                    mergeLoader(defaultLoader[3], item);
-                    break;
-                case 'css':
-                    mergeLoader(defaultLoader[4], item);
-                    break;
-                case 'scss':
-                    mergeLoader(defaultLoader[5], item);
-                    break;
-                case 'less':
-                    mergeLoader(defaultLoader[6], item);
-                    break;
-                case 'img':
-                    mergeLoader(defaultLoader[7], item);
-                    break;
-                case 'other':
-                    //没有默认loader的文件添加
-                    item.length &&
-                        item.map((loader) => {
-                            !loaderDefaultArr.some((loaderDefault) =>
-                                loaderDefault.match(loader.test)
-                            ) && defaultLoader.push(loader);
-                        });
-                    break;
-                default:
-            }
-        });
-}
-module.exports = function (config) {
+module.exports = function (config, isServer) {
     if (!fs.existsSync(webpackConfigPath)) {
         return config;
     }
+    let customConfig = config;
     delete require.cache[require.resolve(webpackConfigPath)];
-    const customConfig = require(webpackConfigPath);
-    if (!customConfig) return config;
-    Object.entries(customConfig).map(([key, val]) => {
-        switch (key) {
-            case 'loader':
-                loaderConfig(val, config);
-                break;
-            case 'externals':
-                //添加externals 合并
-                config.externals = val
-                    ? Object.assign(config.externals || {}, val)
-                    : config.externals;
-                break;
-            case 'extensions':
-                //添加extensions 合并去重
-                config.resolve.extensions =
-                    val && val.length
-                        ? Array.from(new Set([...config.resolve.extensions, ...val]))
-                        : config.resolve.extensions;
-                break;
-            case 'alias':
-                //添加alias 覆盖
-                config.resolve.alias = val || config.resolve.alias;
-                break;
-            case 'plugins':
-                //添加plugin 合并
-                config.plugins = val ? config.plugins.concat(val) : config.plugins;
-                break;
-            default:
-                //直接覆盖操作
-                config[key] = val || config[key] || '';
-                break;
-        }
-    });
-    return config;
+    const configureWebpack = require(webpackConfigPath);
+    if (typeof configureWebpack === 'function') {
+        // apply customConfig
+        customConfig = Reflect.apply(configureWebpack, config, [config, isServer ? 'ssr' : 'csr']);
+    }
+
+    if (typeof configureWebpack === 'object') {
+        // webpack-merge
+        customConfig = merger(config, configureWebpack);
+    }
+
+    return customConfig;
 };

packages/react-webpack/src/react/dev.js

@@ -1,6 +1,7 @@
 import { getBaseconfig } from './base';
+import combine from './combine';
 
 export function getDevConfig(page, isServer, hotReload = false) {
     let config = getBaseconfig(page, isServer, hotReload);
-    return config;
+    return combine(config, false);
 }

packages/react-webpack/src/react/prod.js

@@ -1,5 +1,6 @@
 import { getBaseconfig } from './base';
 import { getPlugin } from './plugin';
+import combine from './combine';
 
 function getProconfig(page, isServer) {
     let config = getBaseconfig(page);
@@ -9,7 +10,7 @@ function getProconfig(page, isServer) {
         mode: 'production',
         plugins: [...getPlugin(config.entry, isServer)]
     });
-    return buildConfig;
+    return combine(buildConfig, false);
 }
 
 module.exports = {

packages/react-webpack/yarn.lock

@@ -7002,6 +7002,14 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-merge@5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
 webpack-node-externals@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
@@ -7081,6 +7089,11 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
+wildcard@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
+  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
+
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"

packages/vue-webpack/package.json

@@ -69,6 +69,7 @@
 		"vue-style-loader": "^4.1.3",
 		"vue-template-compiler": "^2.6.14",
 		"webpack": "^4.35.0",
+		"webpack-merge":"5.8.0",
 		"webpack-bundle-analyzer": "^4.4.2",
 		"webpack-dev-server": "^3.7.2",
 		"webpack-node-externals": "^3.0.0"