Scaffolding

config/webpack.common.js

@@ -0,0 +1,136 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const AutoPrefixer = require('autoprefixer');
+
+const Path = require("path");
+const ProjectPath = Path.resolve(__dirname, "../");
+const SourcePath = Path.resolve(ProjectPath, "./source");
+const BuildPath = Path.resolve(ProjectPath, "./build");
+const AssetsPath = Path.resolve(ProjectPath, "./assets");
+
+/**
+ * 解析项目路径
+ * @param {string} path 相对项目根目录的路径
+ * @return {string} 解析路径
+ */
+function project(path) {
+    return Path.resolve(ProjectPath, path);
+}
+
+/**
+ * 解析源文件路径
+ * @param {string} path 相对源文件的路径
+ * @return {string} 解析路径
+ */
+function source(path) {
+    return Path.resolve(SourcePath, path);
+}
+
+/**
+ * 解析编译文件路径
+ * @param {string} path 相对编译文件的路径
+ * @return {string} 解析路径
+ */
+function build(path) {
+    return Path.resolve(BuildPath, path);
+}
+
+/**
+ * 解析资源文件路径
+ * @param {string} path 相对资源文件的路径
+ * @return {string} 解析路径
+ */
+function assets(path) {
+    return Path.resolve(AssetsPath, path);
+}
+
+/**
+ * 项目入口
+ */
+const Entry = () => ({
+        
+    Model: {
+        import: source("./Model/Model.ts")
+    },
+
+    livingTogether: {
+        import: source("./livingTogether.ts"),
+        dependOn: "Model",
+    },
+
+    LaboratoryPage: {
+        import: source("./Page/Laboratory/Laboratory.tsx"),
+        dependOn: "Model",
+    }
+});
+
+/**
+ * 项目输出
+ * @param {string} name 输出名字
+ * @returns 输出配置
+ */
+const Output = (name = "[name].js") => ({
+    filename: name,
+    path: BuildPath
+});
+
+const TypeScriptRules = () => ({
+    test: /\.tsx?$/,
+    use: [
+        {
+            loader: "ts-loader",
+            options: {
+                configFile: project("./tsconfig.json")
+            }
+        },
+    ]
+});
+
+const ScssRules = () => ({
+    test:/\.(sass|scss)$/,
+    use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
+});
+
+const resolve = (plugins = []) => {
+
+    let res = {
+        extensions: [ ".tsx", '.ts', '.js' ],
+        plugins: plugins
+    };
+
+    res.plugins.push(
+        new TsconfigPathsPlugin({
+            baseUrl: ProjectPath,
+            configFile: project("./tsconfig.json")
+        })
+    )
+
+    return res;
+};
+
+/**
+ * 使用模板
+ * @param {string} url 使用的模板路径
+ * @returns HTML插件
+ */
+const HTMLPage = (name, title) => {
+    return new HtmlWebpackPlugin({
+        xhtml: true,
+        title: title ?? "Living Together",
+        favicon: assets("./favicon.ico"),
+        filename: build(name ?? "index.html"),
+        template: assets("index.html")
+    });
+}
+
+const CssPlugin = () => new MiniCssExtractPlugin();
+
+const AutoFixCssPlugin = () => AutoPrefixer;
+
+module.exports = {
+    project, source, assets, build,
+    Entry, Output, resolve,
+    TypeScriptRules, ScssRules,
+    HTMLPage, CssPlugin, AutoFixCssPlugin
+}

config/webpack.lab.js

@@ -0,0 +1,69 @@
+const { 
+    Entry, Output, resolve, build,
+    TypeScriptRules, ScssRules,
+    HTMLPage, CssPlugin, AutoFixCssPlugin
+} = require("./webpack.common");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            Model: AllEntry.Model,
+            LaboratoryPage: AllEntry.LaboratoryPage
+        },
+
+        output: Output("[name].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        module: {
+            rules: [
+                TypeScriptRules(),
+                ScssRules()
+            ]
+        },
+        
+        plugins: [
+            HTMLPage("Laboratory.html", "Living Together | Laboratory"),
+            CssPlugin(),
+            AutoFixCssPlugin()
+        ],
+
+        optimization: {
+            splitChunks: {
+                chunks: 'async',
+                minSize: 20000,
+                minRemainingSize: 0,
+                minChunks: 1,
+                maxAsyncRequests: 30,
+                maxInitialRequests: 30,
+                enforceSizeThreshold: 50000,
+                cacheGroups: {
+                    defaultVendors: {
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: -10,
+                        reuseExistingChunk: true,
+                    },
+                    default: {
+                        minChunks: 2,
+                        priority: -20,
+                        reuseExistingChunk: true,
+                    }
+                }
+            }
+        },
+        
+        devServer: {
+            static: {
+                directory: build("./"),
+            },
+            port: 12000,
+        }
+    };
+
+    return config;
+};