hw-weapp-compiler 1.0.0

package/build/webpack.config.js

@@ -0,0 +1,381 @@
+const { merge } = require('webpack-merge');
+const path = require('path');
+const webpack = require('webpack');
+const fse = require('fs-extra');
+const CopyPlugin = require('copy-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const autoprefixer = require('autoprefixer');
+const postcssPresetEnv = require('postcss-preset-env');
+
+const WeappPlugin = require('./plugin');
+const getResourceAccept = require('./config/getResourceAccept');
+const { getBuildEnv } = require('./utils/buildEnv');
+const getContext = require('./config/getContext');
+const getConfig = require('./config/getConfig');
+const getOutput = require('./config/getOutput');
+const getEntrys = require('./config/getEntrys');
+const getAssets = require('./config/getAssets');
+const getAppConfig = require('./config/getAppConfig');
+
+const isSubpackage = require('./utils/isSubpackage');
+const compatiblePath = require('./utils/compatiblePath');
+const ENV = require('./config/env');
+
+const appConfig = getAppConfig();
+const assets = getAssets();
+const context = getContext();
+const { alias, publicPath = 'auto', copyFiles = [] } = getConfig();
+const output = getOutput();
+const entrys = getEntrys();
+
+const defaultCopyFiles = ['project.config.json', 'sitemap.json'];
+
+// 删除output目录文件
+if (fse.existsSync(output)) {
+  const files = fse.readdirSync(output);
+
+  files.forEach((item) => {
+    if (!/project\.config\.json/g.test(item)) {
+      fse.removeSync(path.resolve(output, item));
+    }
+  });
+} else {
+  fse.mkdirSync(output);
+}
+
+module.exports = (options, { analyzer, quiet } = {}) => {
+  // eslint-disable-next-line
+  const assetsName = (resourcePath, resourceQuery) => {
+    if (/node_modules/g.test(resourcePath)) {
+      return path.relative(path.resolve(process.cwd(), 'node_modules'), resourcePath);
+    }
+    return '[path][name].[ext]';
+  };
+  const plugins = [
+    new MiniCssExtractPlugin({
+      filename: '[name].wxss',
+      // filename(asset) {
+      //   console.log(asset.chunk.name);
+      //   return '[name].wxss';
+      // },
+    }),
+    new webpack.DefinePlugin({
+      'process.env.BUILD_ENV': JSON.stringify(getBuildEnv()),
+    }),
+    new WeappPlugin(),
+  ];
+
+  const getResource = (module) => {
+    // eslint-disable-next-line
+    let resource = module.resource || module._identifier;
+
+    if (!resource) {
+      return false;
+    }
+
+    resource = resource.split('!');
+    resource = resource[resource.length - 1];
+
+    return resource;
+  };
+
+  // chunk
+  const cacheGroups = {
+    vendors: {
+      minChunks: 1,
+      // test: /\/node_modules\//,
+      test(module) {
+        const resource = getResource(module);
+
+        if (resource === false) {
+          return true;
+        }
+        if (/\.wxss/g.test(resource)) {
+          return false;
+        }
+
+        if (/node_modules/.test(resource)) {
+          return true;
+        }
+
+        return false;
+      },
+      name: 'vendors',
+      reuseExistingChunk: true,
+    },
+    vendors_wxss: {
+      minChunks: 2,
+      test: /node_modules/,
+      name: 'vendors_wxss',
+      reuseExistingChunk: true,
+    },
+    commons: {
+      minChunks: 2,
+      // test: /^((?!.*(\/node_modules\/)).)*$/,
+      test(module) {
+        const resource = getResource(module);
+
+        if (resource === false) {
+          return false;
+        }
+        if (/node_modules/.test(resource)) {
+          return false;
+        }
+
+        if (isSubpackage(path.relative(context, resource))) {
+          return false;
+        }
+        return true;
+      },
+      name: 'commons',
+      reuseExistingChunk: true,
+    },
+  };
+  (appConfig.subpackages || []).forEach((pkg) => {
+    let { root } = pkg;
+    const name = path.join(root, 'subpackage_common');
+    cacheGroups[name] = {
+      name,
+      test(module) {
+        const resource = getResource(module);
+
+        if (resource === false) {
+          return false;
+        }
+        if (!/\/$/g.test(root)) {
+          root = `${root}/`;
+        }
+
+        if (/node_modules/.test(resource)) {
+          return false;
+        }
+        return compatiblePath(path.relative(context, resource)).indexOf(root) === 0;
+      },
+      minChunks: 2,
+      reuseExistingChunk: true,
+    };
+  });
+
+  const getCssLoader = ({ use = [] } = {}) => {
+    return [
+      {
+        loader: MiniCssExtractPlugin.loader,
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: use.length + 1,
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          postcssOptions: {
+            plugins: [
+              autoprefixer,
+              [
+                postcssPresetEnv,
+                {
+                  // Options
+                },
+              ],
+            ],
+          },
+        },
+      },
+      ...use,
+    ];
+  };
+
+  if (analyzer) {
+    plugins.push(new BundleAnalyzerPlugin());
+  }
+  if (quiet !== true) {
+    plugins.push(
+      new webpack.ProgressPlugin({
+        activeModules: false,
+        entries: true,
+        // handler(percentage, message, ...args) {
+        //   // custom logic
+        // },
+        modules: true,
+        modulesCount: 5000,
+        profile: false,
+        dependencies: true,
+        dependenciesCount: 10000,
+        percentBy: null,
+      }),
+    );
+  }
+  // 配置copy plugin
+  const patterns = [];
+  defaultCopyFiles.forEach((file) => {
+    if (fse.existsSync(path.resolve(context, file))) {
+      patterns.push({
+        from: path.resolve(context, file),
+        to: path.resolve(output, file),
+      });
+    }
+  });
+  copyFiles.forEach((file) => {
+    patterns.push({
+      from: path.resolve(context, file.from),
+      to: path.resolve(output, file.to),
+    });
+  });
+
+  plugins.push(
+    new CopyPlugin({
+      patterns,
+      options: {
+        concurrency: 100,
+      },
+    }),
+  );
+
+  return merge(
+    {
+      mode: ENV.PROD,
+      entry: entrys,
+      context,
+      stats: {
+        errorDetails: true,
+      },
+      output: {
+        path: output,
+        publicPath,
+      },
+      plugins,
+      resolve: {
+        alias,
+        preferRelative: true,
+      },
+      module: {
+        rules: [
+          {
+            test: getResourceAccept(),
+            use: [
+              {
+                loader: 'url-loader',
+                options: {
+                  limit: 0,
+                  // true 需要 .default, false 不需要 .defualt
+                  esModule: false,
+                  fallback: {
+                    loader: 'file-loader',
+                    options: {
+                      name: `${assets}/[name].[hash].[ext]`,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            test: /\.(wxss|css)$/i,
+            include: /node_modules/,
+            use: [...getCssLoader()],
+          },
+          {
+            // test: /\.less$/i,
+            test: /\.(less|wxss|css)$/i,
+            exclude: /node_modules/,
+            use: [
+              ...getCssLoader({
+                use: [
+                  {
+                    loader: 'less-loader', // compiles Less to CSS
+                    options: {
+                      lessOptions() {
+                        return {
+                          paths: [context],
+                        };
+                      },
+                    },
+                  },
+                ],
+              }),
+            ],
+          },
+          {
+            test: /\.(json)$/i,
+            type: 'javascript/auto',
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: assetsName,
+                },
+              },
+            ],
+          },
+          {
+            test: /\.(wxs)$/i,
+            type: 'javascript/auto',
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: assetsName,
+                },
+              },
+              {
+                loader: path.resolve(__dirname, 'loader/wxs-loader'),
+              },
+            ],
+          },
+          {
+            test: /\.(wxml)$/i,
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: assetsName,
+                },
+              },
+              {
+                loader: path.resolve(__dirname, 'loader/wxml-loader'),
+              },
+            ],
+          },
+          {
+            test: /\.(js)$/i,
+            use: [
+              {
+                loader: 'babel-loader',
+                options: {
+                  cacheDirectory: true,
+                  presets: [
+                    [
+                      '@babel/preset-env',
+                      {
+                        targets: 'defaults',
+                        modules: 'commonjs',
+                      },
+                    ],
+                  ],
+                  plugins: ['@babel/plugin-transform-runtime'],
+                },
+              },
+              {
+                loader: path.resolve(__dirname, 'loader/js-loader'),
+              },
+            ],
+          },
+        ],
+      },
+      optimization: {
+        runtimeChunk: {
+          name: 'runtime',
+        },
+        splitChunks: {
+          minSize: 0,
+          chunks: 'all',
+          cacheGroups,
+        },
+      },
+    },
+    options,
+  );
+};

package/index.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+// 高版本 Node.js (>=17) 兼容 OpenSSL 3.0
+const nodeMajor = process.versions.node.split('.')[0];
+if (nodeMajor >= 17) {
+  process.env.NODE_OPTIONS = `${process.env.NODE_OPTIONS || ''} --openssl-legacy-provider`.trim();
+}
+
+const { program } = require('commander');
+const path = require('path');
+const fs = require('fs');
+const dev = require('./build/dev');
+const prod = require('./build/prod');
+const { setBuildEnv } = require('./build/utils/buildEnv');
+const ENV = require('./build/config/env');
+
+const { version } = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, './package.json')).toString(),
+);
+const compiler = {
+  dev,
+  prod,
+};
+
+program.version(version);
+program.option('-a, --analyzer', 'webpack-bundle-analyzer');
+program.option('-s, --simulation', 'process.env.BUILD_ENV = simulation');
+program.option('-d, --development', 'process.env.BUILD_ENV = development');
+program.option('-p, --production', 'process.env.BUILD_ENV = production');
+program.option('-q, --quiet', '安静模式，打印减少');
+
+program.command('dev').action(() => {
+  setBuildEnv({
+    mode: ENV.DEV,
+    ...program.opts(),
+  });
+  compiler.dev(program.opts());
+});
+program.command('build').action(() => {
+  setBuildEnv({
+    mode: ENV.PROD,
+    ...program.opts(),
+  });
+  compiler.prod(program.opts());
+});
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "hw-weapp-compiler",
+  "version": "1.0.0",
+  "description": "基于 webpack5 的小程序构建工具，兼容 Node.js 14~24",
+  "main": "index.js",
+  "bin": {
+    "weapp": "index.js"
+  },
+  "author": "go1024",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": ">=14.17.1"
+  },
+  "dependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.12",
+    "ali-oss": "^6.15.2",
+    "autoprefixer": "^10.3.4",
+    "babel-loader": "^8.2.2",
+    "chalk": "^4.1.0",
+    "commander": "^7.2.0",
+    "copy-webpack-plugin": "^8.1.0",
+    "css-loader": "^5.2.0",
+    "esdk-obs-nodejs": "^3.21.3",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^9.1.0",
+    "hasha": "^5.2.2",
+    "htmlparser2": "^6.0.1",
+    "less": "^4.1.1",
+    "less-loader": "^8.0.0",
+    "loader-utils": "^2.0.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "postcss-loader": "^5.2.0",
+    "postcss-preset-env": "^9.6.0",
+    "progress": "^2.0.3",
+    "style-loader": "^2.0.0",
+    "throttle-debounce": "^3.0.1",
+    "uglify-js": "^3.14.2",
+    "url-loader": "^4.1.1",
+    "weapp-compiler-hw": "^0.0.1",
+    "webpack": "^5.61.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-merge": "^5.7.3",
+    "webpack-sources": "^2.2.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.14"
+  },
+  "scripts": {
+    "build": "node ./index.js build",
+    "dev": "nodemon --inspect --trace-deprecation --watch build ./index.js dev",
+    "simulation": "node ./index.js build -s"
+  }
+}