利用webpack按需打包vue项目

利用webpack按需打包vue项目,大致步骤如下：

大致的思路：就是在不同的入口文件(如main_xxx.js)中引入不同的router.js来打包的

第一步：安装cross-env插件来自动获取类似在.env.xxx文件了里定义的变量VUE_APP_PROJECT_NAME = "project1" NODE_ENV = "production"，那样就可以不用创建.env.xxx文件了

npm install --save-dev cross-env

第二步：在src目录下创建自己的打包的入口文件main_project1.js 和main_project2.js 并分别在它们中引入不同的router.js

第三步：在vue.config.js中动态配置入口和出口（webpack.config.js中的写法和vue.config.js写法有些不同需注意）

//vue.config.js
// 动态定义出口
const outputDir = `dist/${process.env.VUE_APP_PROJECT_NAME}/`
module.exports = {
  //出口
  outputDir: outputDir,
  // 动态定义入口 其中 main_' + process.env.VUE_APP_PROJECT_NAME +'.js 为动态获取创建的main_project1.js
  pages: {
    index: {
      entry: 'src/main_' + process.env.VUE_APP_PROJECT_NAME +'.js',
    },
  },
}

第四步：在package.json中的scripts里添加如下代码,其中VUE_APP_PROJECT_NAME=project1 中的project1就是动态拼接的main_project1.js后面的一部分，即：entry: 'src/main_' + process.env.VUE_APP_PROJECT_NAME +'.js'

 "scripts": {
    "build_project1": "cross-env NODE_ENV=production VUE_APP_PROJECT_NAME=project1 vue-cli-service build",
    "build_project2": "cross-env NODE_ENV=production VUE_APP_PROJECT_NAME=project2 vue-cli-service build"
  },

第五步：在vscode终端分别输入打包命令,最后会在dist文件里面分别创建打包后的文件夹project1和project2

 npm run build_project1
 
 npm run build_project2