摘要：解決方案一在一個項目中，使用配置多個文件來實現多頁面應用存在的利弊配置簡單打包效率低下靈活性差需要維護多個文件解決方案二采用使用統一維護每個項目的并為頭部注入用戶信息，并且多帶帶構建一個項目，統一維護第三方依賴。

數據管理平臺包含了多個后臺項目，后臺項目均使用vue作為開發框架。

子項目存在公共頭部，需要統一管理維護。

子項目存在公共的依賴（如vue、vuex、vue-router等），公共依賴包可以統一維護。

子項目存在公共存在公共的配置文件例如postcss.config.js需要統一維護。

在一個項目中，使用entry配置多個html文件來實現多頁面應用

存在的利弊：

配置簡單

打包效率低下

靈活性差

需要維護多個html文件

使用thinkjs統一維護每個項目的template.html,并為頭部注入用戶信息，并且多帶帶構建一個common項目，統一維護第三方依賴。

存在的利弊：

配置繁瑣

打包效率高

靈活性好

只需維護一個html文件

├─src
│  ├─bootstrap
│  ├─config
│  ├─controller
│  ├─logic
│  └─model
├─view
│  └─index                            //模板文件目錄
└─vue_project                                
    |—package.json                    //統一維護所有依賴
    ├─asset_manage                    //子項目目錄
    ├─common                        //打包公共組件項目
    ├─postcss.config.js             //公用的配置文件

打包主要配置介紹：

module.exports = {
    mode: "production",
    entry: {
        vendor: [...Object.keys(package.dependencies), "./css/element-css/index.css", "./css/index.postcss"],
    },
    devtool: "source-map",
    output: {
        path: path.join(__dirname, "../vendor"),
        filename: "dll.[name]_[hash:6].js",
        library: "[name]_[hash:6]"
    },
    module: {
        rules: [{
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /.postcss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    }, "postcss-loader", ]
                })
            },
            {
                test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
                use: "url-loader"
            },
        ]
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "../vendor", "[name]-manifest.json"),
            name: "[name]_[hash:6]",
            context: path.join(__dirname, "../../"), // 執行的上下文環境，對之后DllReferencePlugin有用
        }),
        new ExtractTextPlugin("[name]_[hash:6].css"),
        new AssetsPlugin({
            filename: "bundle-config.json",
            path: path.join(__dirname, "../vendor")
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /.css$/g,
            cssProcessor: require("cssnano"),
            cssProcessorOptions: {
                parser: require("postcss-safe-parser"),
                discardComments: {
                    removeAll: true
                },
            },
            canPrint: true
        })
    ]
}

vue-cli3的配置文件被封裝在了npm模塊@vue/cli-service 中可使用vue inspect > output.js進行查看

const webpackConfig = {
    configureWebpack: {
        plugins: [
            new webpack.DllReferencePlugin({
                context: path.join(__dirname, "../../"),
                manifest
            }),
            new AddAssetHtmlPlugin([{
                    filepath: require.resolve(`../vendor/${bundleConfig.vendor.js}`),
                    includeSourcemap: false
                },
                {
                    typeOfAsset: "css",
                    filepath: require.resolve(`../vendor/${bundleConfig.vendor.css}`),
                    includeSourcemap: false
                }
            ])
        ]
    },
    chainWebpack: config => {
        config.resolve.alias.store.delete("vue$");
        config.plugin("copy").tap(args => {
            args[0][0].from = "./public";
            args[0][0].to = "public";
            args[0][0].ignore = [".*"];
            return args;
        });
        config.plugin("define").tap(args => {
            args[0]["process.env"]["BUILD_ENV"] = """ + process.env.BUILD_ENV + """;
            return args;
        });
        config.module.rule("postcss").oneOf("vue").use("postcss").loader("postcss-loader").options({
            config: {
                path: path.join(__dirname, "../../")
            }
        });
    },
}

如果各自項目的打包依賴分布在各自項目中，依然會增加維護成本以及依賴安裝的打包成本

這里就需要理解node查找依賴的邏輯。通過module.paths可以看到node查找依賴時的，順序

[ "E:datamanagementvue_projectasset_manage
epl
ode_modules",
  "E:datamanagementvue_projectasset_manage
ode_modules",
  "E:datamanagementvue_project
ode_modules",
  "E:datamanagement
ode_modules",
  "E:
ode_modules",
  "C:Users18044854.node_modules",
  "C:Users18044854.node_libraries",
  "C:Program Files
odejslib
ode" ]

node會從當前目錄的node_modules一級一級的向上查找，
所以我們只需要將所有依賴安裝在common和vue的父級目錄即可