摘要：解決方案一在一個(gè)項(xiàng)目中，使用配置多個(gè)文件來實(shí)現(xiàn)多頁面應(yīng)用存在的利弊配置簡(jiǎn)單打包效率低下靈活性差需要維護(hù)多個(gè)文件解決方案二采用使用統(tǒng)一維護(hù)每個(gè)項(xiàng)目的并為頭部注入用戶信息，并且多帶帶構(gòu)建一個(gè)項(xiàng)目，統(tǒng)一維護(hù)第三方依賴。

數(shù)據(jù)管理平臺(tái)包含了多個(gè)后臺(tái)項(xiàng)目，后臺(tái)項(xiàng)目均使用vue作為開發(fā)框架。

子項(xiàng)目存在公共頭部，需要統(tǒng)一管理維護(hù)。

子項(xiàng)目存在公共的依賴（如vue、vuex、vue-router等），公共依賴包可以統(tǒng)一維護(hù)。

子項(xiàng)目存在公共存在公共的配置文件例如postcss.config.js需要統(tǒng)一維護(hù)。

在一個(gè)項(xiàng)目中，使用entry配置多個(gè)html文件來實(shí)現(xiàn)多頁面應(yīng)用

存在的利弊：

配置簡(jiǎn)單

打包效率低下

靈活性差

需要維護(hù)多個(gè)html文件

使用thinkjs統(tǒng)一維護(hù)每個(gè)項(xiàng)目的template.html,并為頭部注入用戶信息，并且多帶帶構(gòu)建一個(gè)common項(xiàng)目，統(tǒng)一維護(hù)第三方依賴。

存在的利弊：

配置繁瑣

打包效率高

靈活性好

只需維護(hù)一個(gè)html文件

├─src
│  ├─bootstrap
│  ├─config
│  ├─controller
│  ├─logic
│  └─model
├─view
│  └─index                            //模板文件目錄
└─vue_project                                
    |—package.json                    //統(tǒng)一維護(hù)所有依賴
    ├─asset_manage                    //子項(xiàng)目目錄
    ├─common                        //打包公共組件項(xiàng)目
    ├─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, "../../"), // 執(zhí)行的上下文環(huán)境，對(duì)之后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進(jìn)行查看

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, "../../")
            }
        });
    },
}

如果各自項(xiàng)目的打包依賴分布在各自項(xiàng)目中，依然會(huì)增加維護(hù)成本以及依賴安裝的打包成本

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

[ "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會(huì)從當(dāng)前目錄的node_modules一級(jí)一級(jí)的向上查找，
所以我們只需要將所有依賴安裝在common和vue的父級(jí)目錄即可