合并项目

1.最终实现结果

先看下目录结构

projectA,projectB是三个业务上没有关系的三个项目，但是可以共用一些公用的组件、公用工具类、公用样式等。

要实现npm run dev/build projectA编译打包的时候，只编译打包项目projectA，而projectB和projectC不会编译打包进来。

实现npm run dev/build + 项目名字编译打包对应的项目

2.实现

分两个步骤

第一是怎样当npm run dev/build + 项目名字的时候让webpack知道你想打包哪个项目

第二是根据项目名称来动态更改一些webpack配置

第一

在config目录下新建两个脚本文件

脚本内容

build.js

let projectName = process.argv[2]

let fs = require('fs')

fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)

let exec = require('child_process').execSync;

exec('npm run b', {stdio: 'inherit'});

dev.js

let projectName = process.argv[2]

let fs = require('fs')

fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)

let exec = require('child_process').execSync;

exec('npm run d', {stdio: 'inherit'});

再config目录下新建 project.js文件和projectconfig.js

const projectName = require('./project')

const config = {

  projectA:{

    localPath:'./src/projects/projectA/'

  },

  projectB:{

    localPath:'./src/projects/projectB/'

  }

}

const configObj = config[projectName.name]

module.exports = configObj

修改package.json

"scripts": {

    "d": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "b": "node build/build.js",

    "dev": "node config/dev.js",

    "build": "node config/build.js"

  },

const projectConfig = require('../config/projectConfig')

app: ['babel-polyfill', projectConfig.localPath+'main.js']

到此第一步就完成了

以打projectA生产包为例

当执行npm run build projectA的时候，会执行build.js脚本，并把projectA传给脚本

第二

至于webpack配置，可以通过修改HtmlWebpackPlugin的template和修改打包入口路径来动态打包。

首先为每个项目单独新建入口和渲染模板

还是以打projectA生产包为例,即npm run build projectA

根据引入下链接的及联系其作者帮忙解决问题，自己做的备份：https://www.jianshu.com/p/fa19a07b1496