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
