vue两个项目合并 怎么设置不同入口和打包路径

Question

相当于有一个和src同级的目录 story 里面都有各自的main.js router

怎样通过不同命令启动不同项目
而且根据不同命令分别打包src 和story

Answer 1

entry 的值可以是一个对象，如果output 的文件名里用了 [name] 表达式，这个表达式最终会变成 entry 对象的键名。
所以，如果这个键名中带有路径，就可以控制输出的路径了，每个项目入口对应一个键，就可以互不干扰了。
但是 chunk file 貌似不支持 name ?(有段时间没配置了) 。

最好还是去搜搜有没有满足这种需求的插件了。

Answer 2

可以通过webpack的环境变量实现，两个项目设置不同的环境变量，webpack配置文件中方读取它们，从而设置不同的打包入口

package.json:

scripts: {
    "src": "webpack 你的webpack配置文件.js --env ENTRY=src --progress",
    "story": "webpack 你的webpack配置文件.js --env ENTRY=story --progress",
}

你的webpack配置文件:

const path = require('path');

module.exports = env => {
  return {
    // 根据环境变量区分打包入口
    entry: `./${env.ENTRY}/index.js`,
    output: {
      filename: 'bundle.js',
      // 根据环境变量区分输出文件夹
      path: path.resolve(__dirname, `dist/${ENTRY}`),
    },
  };
};

运行不同的项目可以通过

npm run src

或者

npm run story

来实现