WebPack配置vue多页面的技巧

Webpack配置vue多页面的奥秘：零改动打造后台管理界面

一直以来，Webpack与我们前端的开发旅程有着千丝万缕的联系。项目的前台页面逐渐成形，无需复杂的Webpack配置，也能顺利运行。当我们需要构建后台管理界面时，如何在不影响原有配置的前提下实现多页面开发呢？本文将带你一种无需大动干戈的方法，带你轻松实现vue多页面开发。

让我们看看项目的初始结构：

项目文件夹中包含了build、config、src等文件夹，以及package.json、yarn.lock等重要文件。在src文件夹内，我们有api、assets、components、pages、router、utils、vuex等子文件夹，以及App.vue、main.js等核心文件。这就是一个典型的vue-cli初始化项目结构。

我们的目标是新增一个后台管理界面的入口——admin.html，同时确保其他公共资源能够共享。那么，关键在于修改webpack的配置文件。

让我们重点关注webpack.base.conf.js的修改。打开此文件，找到entry部分，添加多入口：

原来的配置可能是这样的：

entry: {

app: './src/main.js'

}

现在，我们需要为后台管理界面新增一个入口：

entry: {

app: './src/main.js',

admin: './src/admin.js' // 新增后台管理入口

}

配置开发环境（Dev）的修改

打开 `webpack.dev.conf.js` 文件，深入 `plugins` 部分，找到 `HtmlWebpackPlugin`。为了支持多页面应用，我们需要为每个页面添加相应的配置。每个页面都有其独特的 `chunk` 配置，如下所示：

```javascript

// 对于首页 'index.html' 的配置

new HtmlWebpackPlugin({

filename: 'index.html', // 输出文件的名称

template: 'index.html', // 使用的模板文件

inject: true, // 将脚本注入到 HTML 文件中

chunks: ['app'] // 需要引入的 chunk，避免引入所有页面的资源

}),

// 对于 'admin.html' 页面的配置

new HtmlWebpackPlugin({

filename: 'admin.html',

template: 'admin.html',

inject: true,

chunks: ['admin'] // 仅引入 admin 页面所需的资源

})

```

生产环境（Build）配置的修改

我们要对 `config/index.js` 文件进行修改。找到 `build` 配置下的 `index` 属性，然后添加多页面的路径配置，例如为 `admin` 页面添加路径。

接着，打开 `webpack.prod.conf.js` 文件，同样找到 `HtmlWebpackPlugin` 部分。为每个页面配置相应的 `HtmlWebpackPlugin` 实例，包括其特定的文件名、模板文件、注入设置以及 `chunk` 配置。例如：

```javascript

// 为首页 'index.html' 配置的插件实例

new HtmlWebpackPlugin({

filename: config.builddex, // 输出文件的路径

template: 'index.html', // 使用的模板文件

inject: true, // 将脚本注入到 HTML 文件中

minify: { // 压缩 HTML 代码的配置

removeComments: true, // 删除注释

collapseWhitespace: true, // 压缩空白字符

removeAttributeQuotes: true // 删除属性引号等优化设置

// 更多选项参考：

},

chunksSortMode: 'dependency', // 按依赖排序 chunks 以确保正确的加载顺序

chunks: ['manifest', 'vendor', 'app'] // 需要引入的 chunks 资源列表，确保只引入必要的资源块。对于 'admin' 页面的配置类似。

})

```

修改完毕后，项目结构清晰明了，同时保持了项目的稳定性和可扩展性。使用 webpack 进行资源打包和处理的方式变得更加直观和高效。接下来您可以根据需要进行更多的开发和部署工作。记得运行你的应用以确认修改后的配置是否正确无误。至此，没有其他复杂的项目结构改动需要进行。确保阅读和理解 webpack 配置非常重要，以避免出错或遇到难以预料的问题。如果您有进一步的配置需求或问题，请随时查阅相关文档或寻求帮助。调用 `cambrian.render('body')` 以完成渲染过程。