使用vue-cli和webpack 3扩展多模块打包

前端

2023-11-08 13:02:46

随着项目开发的不断深入，可能会遇到需要多个模块（单页或多页应用）配合使用的情况。然而，vue-cli默认只提供了单入口打包，这就需要对vue-cli进行扩展以实现多模块打包。

多模块打包的优势

多模块打包可以带来诸多优势，包括：

代码组织更清晰： 每个模块可以单独打包成一个独立的文件，便于管理和维护。
提高构建速度： 将项目拆分成多个模块，可以并行构建，显著提高构建速度。
便于代码复用： 可以将一些通用的代码块打包成一个单独的模块，然后在其他模块中引用，实现代码复用。
提高可维护性： 每个模块都有自己的构建配置，便于定位和解决问题，提高代码的可维护性。

实现多模块打包的步骤

为了实现多模块打包，需要遵循以下步骤：

创建新的Vue项目：

vue create my-app --default

安装webpack 3：

npm install --save-dev webpack@3

创建webpack配置文件：

在项目根目录下创建webpack.config.js文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: {
    app1: './src/app1/main.js',
    app2: './src/app2/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

在package.json文件中添加构建脚本：

{
  "scripts": {
    "build": "webpack"
  }
}

运行构建脚本：

npm run build

此时，将在项目根目录下的dist文件夹中生成两个打包文件：app1.js和app2.js。

使用多模块打包构建单页应用

如果要使用多模块打包构建单页应用，可以将所有模块的入口文件都指向同一个HTML文件，例如index.html：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app1"></div>
  <div id="app2"></div>

  <script src="./dist/app1.js"></script>
  <script src="./dist/app2.js"></script>
</body>
</html>

使用多模块打包构建多页应用

如果要使用多模块打包构建多页应用，则需要为每个模块创建一个单独的HTML文件，例如app1.html和app2.html：

<!-- app1.html -->
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app1"></div>

  <script src="./dist/app1.js"></script>
</body>
</html>

<!-- app2.html -->
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app2"></div>

  <script src="./dist/app2.js"></script>
</body>
</html>