由vue-cli3搭建的项目的多入口、分模块编译或打包配置

一.前言

使用vue-cli3搭建的项目，vue-cli3搭建的项目没有相关的配置文件和复杂的目录结构，仅生成构建应用程序所需的文件。下图是搭建后的目录结构：

本次配置因为要改到webpack的相关配置，因此需在项目的根目录下（和package.json同级）创建一个vue.config.js的配置文件，这个文件一旦存在就会被@vue/cli-service自动加载。

因为要分模块编译，因此调整了一下项目的目录结构，在src下创建了modules文件夹，以后各个模块就在此文件夹下各自创建，而在src目录下的其他文件夹，都是各个模块公用的文件，下图为调整后的目录结构：

至此，项目的目录结构调整完毕。

二.配置vue.congfig.js文件

const path = require('path');
// 在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息
const moduleName = process.env.npm_config_module; // 单模块编译,本地调试时输入npm run serve --module=模块名，其中npm_config_xxx是跟输入的npm run serve --xxx相对应的

function resolve(dir) {
    return path.join(__dirname, dir); // 拼接目录。__dirname表示当前文件所在的目录名
}
const isDevelopment = process.env.NODE_ENV === 'development'; // 开发环境


const MODULE_LIST = ['lottery']; // 每个新增的模块名都需要在这里添加

function getPages(moduleName) {
    if (isDevelopment && moduleName) { // 开发环境按传入的模块名打包（1个）
        return {
            index: {
                entry: `src/modules/${moduleName}/index.js`, // // page 的入口
                // template: 'public/index.html', // 模板来源
                // filename: 'index.html', // 在 dist/index.html 的输出
                title: `我的营销工具demo之${moduleName}`
            }
        };
    } else {  // 生产环境全部打包
        const modules = moduleName ? [moduleName] : MODULE_LIST;
        const pages = {};
        modules.forEach((item) => {
            pages[item] = {
                entry: `src/modules/${item}/index.js`
            };
        });
        return pages;
    }
}


module.exports = {
    outputDir: 'dist', //当运行 npm run build(打包) 时生成的生产环境构建文件的目录。
    assetsDir: isDevelopment ? 'dev' : '', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    pages: getPages(moduleName), // 多页面需要配置的选项，每个“page”应该有一个对应的 JavaScript 入口文件。
    productionSourceMap: false, // 生产禁止显示源代码
    chainWebpack: (config) => {
        config.resolve.alias
            .set('~imgPath', resolve('src/assets/images'));
    }
};

本地调试时，只要npm run serve --module=模块名即可将项目跑起来。

解释：
其实多入口文件的配置最重要的就是配置pages这个字段，当其值只有一个时是单入口，其值是多个时是多入口，当执行npm run serve --module=xxx时，把参数传了过去，调用getPages函数时，根据传的参数，判断如果是开发环境就只编译当前传参过来的模块，这样就实现了分模块打包了。

至此，相关配置就已完成了~