vue2 + webpack3 多项目构建打包

丹顶壑
425 阅读1分钟

此文只为记录一下，webpack3的配置过程（过程挺折磨人的）。由于业务需要，公司业务模块分成了好几个包，但是又需要共用大量的内容，并且打包还不能干涉到其他模块。可以单独打包某一模块或者多模块。 先上最终效果图

33536.png

1.配置路由

1.首先先从简单的配置router入手；使用vue+cli构建出基本框架，然后找到项目路径的 build/webpack.base.conf.js 文件并找到 alias并加入@project1，@project2(名字根据项目名称,本文先介绍project1)

    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@project1': resolve('src/project1'),
      '@project2': resolve('src/project2'),
    }
  }

2.处理完基本配置后，我们需要对router/index.js进行改造，使其变成一个共用的路由文件（如有需要，可将其包裹起来）。即现在这个router/index.js是一个暴露出来给其他业务可以使用的路由文件。下图就是 改造过后的代码

export const pageRoutes = [{
  path: '/',
  name: 'public',
  component: HelloWorld
}]
export default pageRoutes

3.上面已经有了项目指向了（@project1），接下来就是在src目录下创建一个 project1项目，里面添加一个router和view的文件夹，如下图所示;

20220425162140.png

4.在步骤2里面我们已经暴露出来了路由，接下来我们就需要进入project1项目里，进行合并。

import Vue from 'vue'
import Router from 'vue-router'
import { pageRoutes } from '@/router/index.js'
import project1 from '@project1/view/index.vue'

// pageRoutes 就是公共的路由; project1是项目里面的一个页面

Vue.use(Router)

const routeM = [{
  path: '/project1',
  name: 'project1',
  component: project1
}]

// 合并公共区域的路由
const routes = routeM.concat(pageRoutes)

// 构造路由对象 并暴露出去
const router = new Router({
  routes
})
export default router

5.完成以上步骤后，还需要找到src/main.js找到构造vue函数，接收的路由需要从 import router from './router' 改成 import router from '@project1/router'

保存完成后 就可以愉快的 npm run dev，然后就可以访问http://localhost:8080/#/project1

同理 project2则改成import router from '@project2/router'

现在还是比较朴素的目录结构，也不太符合项目要求的。

注意！注意！注意！

此时还是一个半成品

配置package.json

接下来我就是介绍如何通过webpack配置出不同项目； 之前我们已经设置好了@project1&@project2，接下来我们就要想办法将这两个配置成变量即可实现。我们可以从package.json中的npm run dev和 npm build得知，他们构造的环境不一致。

"scripts": {
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

并且这两句命令的最后是一个js文件（通过修改这个路径也可以完成需求，但是不符合多项目的简化目的），找到文件并打开。找到plugins下面的

new webpack.DefinePlugin({
  'process.env': require('../config/dev.env')
})

'../config/dev.env'这是测试环境的config，打开后我们发现，内容如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

暴露出来的process.env就是我们要在此处增添一个可以批量处理不同项目的配置的对象，package.json作为控制入口就非常的理想，在最后新增了project1&project2的入口，此处需要安装cross-env,代码如下

"scripts": {
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "dev:project1": "cross-env PROJECT=project1 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:project2": "cross-env PROJECT=project2 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  },

设置好后就可以去 config/dev.env.js接收

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
console.log(process.env.NODE_ENV)
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  PROJECT: JSON.stringify(process.env.NODE_ENV),
})

接下来就可以去build/webpack.base.conf.js中把之前的@project1&@project2替换成@project

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@project': resolve(`src/${process.env.PROJECT}`),
    }
  }

同样还有main.js、src/project1/router.js中的@project1替换掉。

下面就是 npm run dev:project1 & npm run dev:project2;

构建出来的project1 可以在路由中访问 http://localhost:8080/#/project1 ,

project2只能在http://localhost:8081/#/project2 打开。已经可以做到两个项目互不干涉

项目到此基本完成，生产环境需要做点调整package.json

"scripts": {
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "dev:project1": "cross-env NODE_ENV=dev PROJECT=project1 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:project2": "cross-env NODE_ENV=dev PROJECT=project2 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:project1": "cross-env NODE_ENV=project PROJECT=project1 node build/build.js",
    "build:project2": "cross-env NODE_ENV=project PROJECT=project2 node build/build.js"
  },

config/prod.env.js别忘了加上 PROJECT: JSON.stringify(process.env.NODE_ENV) 最后还需要找到 config/index.js里面的 build的

build: {
    // Template for index.html
    index: path.resolve(__dirname, `../dist/${(process.env.PROJECT)}/index.html`),

    // Paths
    assetsRoot: path.resolve(__dirname, `../dist/${(process.env.PROJECT)}`),
    assetsSubDirectory: 'static',
    assetsPublicPath: `/`,
    ...其他的太长就不显示了
 }

执行命令 npm run build:project1就可以把压缩包单独打包出来。

avatar
文章
阅读
粉丝