用于大型非SPA站点的Webpack配置文件，其Web根目录之外具有src模块，并以自己的拆分块输出模块？

Question

我正在发布此webpack.config，以便它可能有助于其他人沿用Webpack的学习之路，该配置对我有用。我为大型非SPA网站做前端。我的目标是：1）在整个站点上拥有1个Webpack根目录，并能够基于CLI参数指定要构建的入口点； 2）在其自己的文件夹和捆绑软件中输出公共/共享代码和特定于条目的代码，以及3 ），确保通用/共享代码不会在各个包中重复。非常感谢您提出改进建议，或者如果您对此配置方面有疑问，请在评论中告诉我。

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = env => {
  // entry point and output locations are configured via cli args
  const environment = env.environment ? env.environment : "";
  const site = env.site ? env.site : "";
  const pagetemplate = env.pagetemplate ? env.pagetemplate : "";
  const page = env.page ? env.page : "";

  if (environment && site && pagetemplate && page) {
    const entryobject = (page => {
      switch (page) {
        case "layouttype1":
          return {
            page: "./src/mywebsite/pages/layouttype1entrymodule/index.js"
          };
        case "testpage1":
          return { testpage1: "./src/mywebsite/pages/testpage1/index.js" };
        case "testpage2":
          return { testpage1: "./src/mywebsite/pages/testpage2/index.js" };
        default:
          return { page: "./src/modules/page/index.js" };
      }
    })(page);

    return {
      entry: entryobject, // entry
      output: {
        filename: "[name].bundle.js",
        path: path.join(__dirname, `dist/${environment}/${site}/${page}`),
        publicPath: "/folder/folder/folder/"
      }, // output
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "babel-loader", // transpile es6 to es5
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"]
                }
              }
            ] // use
          },
          {
            test: /\.css$/,
            use: [
              { loader: "style-loader" },
              {
                loader: "css-loader"
              }
            ] // use
          },
          {
            test: /\.scss$/,
            use: [
              {
                loader: "style-loader"
              },
              {
                loader: "css-loader"
              },
              {
                loader: "sass-loader"
              }
            ]
          },
          {
            test: /\.(eot|ttf|woff)$/,
            use: [
              {
                loader: "file-loader",
                options: {
                  name: "[path][name].[ext]"
                } // options
              } // loader
            ] // use
          },
          {
            test: /\.(gif|jpg|png)$/,
            use: [
              {
                loader: "url-loader"
              } // loader
            ] // use
          },
          {
            test: /\.(svg)$/,
            use: [
              {
                loader: "svg-url-loader"
              } // loader
            ] // use
          }
        ] // rules
      }, // module
      plugins: [
        new HtmlWebpackPlugin({ template: "./src/index.html" }),
        new webpack.DefinePlugin({
          "process.env.environment": JSON.stringify(environment),
          "process.env.site": JSON.stringify(site),
          "process.env.pagetemplate": JSON.stringify(pagetemplate),
          "process.env.page": JSON.stringify(page)
        })
      ], // plugins
      resolve: {
        alias: {
          maintemplate: path.resolve(
            __dirname,
            "src/maintemplate/maintemplate.js"
          ),
          sitewide: path.resolve(
            __dirname,
            "src/mywebsite/modules/sitewide/sitewide.js"
          ),
          layouttype1: path.resolve(
            __dirname,
            "src/mywebsite/modules/layouts/layouttype1/layouttype1.js"
          )
        },
        modules: [
          path.resolve(__dirname, "src/maintemplate/node_modules"),
          path.resolve(
            __dirname,
            "src/mywebsite/modules/sitewide/node_modules"
          ),
          path.resolve(
            __dirname,
            "src/mywebsite/modules/layouts/layouttype1/node_modules"
          ),
          "node_modules"
        ]
      }, // resolve
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: "all",
          minSize: 0,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: Infinity,
          automaticNameDelimiter: "~",
          automaticNameMaxLength: 30,
          name: true,
          cacheGroups: {
            vendors: false,
            default: false,
            layouttype1: {
              chunks: "all",
              test: /[\\/]layouttype1[\\/]/,
              name: "layouttype1",
              filename: `../[name]/[name].bundle.js`
            },
            maintemplate: {
              chunks: "all",
              test: /[\\/]maintemplate[\\/]/,
              name: "maintemplate",
              filename: `../[name]/[name].bundle.js`
            },
            gsap2: {
              chunks: "all",
              test: /[\\/]gsap2[\\/]/,
              name: "gsap2",
              filename: `../shared/[name].bundle.js`,
              priority: 100
            },
            jquery3: {
              chunks: "all",
              test: /[\\/]jquery3[\\/]/,
              name: "jquery3",
              filename: `../shared/[name].bundle.js`,
              priority: 100
            },
            sitewide: {
              chunks: "all",
              test: /[\\/]sitewide[\\/]/,
              name: "sitewide",
              filename: `../[name]/[name].bundle.js`
            }
          }
        }
      }
    };
  }
};

Answer 1

我将其发布为其他使用Webpack的资源，以防某些帮助。