欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解webpack编译多页面vue项目的配置问题

程序员文章站 2022-04-24 17:55:30
 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境...

 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下:

一般情况下,构建一个vue项目的步骤为:

1,安装nodejs环境

2,安装vue-cli

cnpm install vue-cli -g 

3,构建vue项目

vue init webpack-simple vue-cli-multipage-demo 

4, 安装项目依赖包

cnpm install 

5,在开发环境下运行该项目:

npm run dev 

通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,接下来的工作就是填代码了。

最近在做一个前端代码重构的时候发现一个问题,使用这个脚手架构建的项目满足不了我的需求,其实这个需求有一点违背我们vue的初衷的,vue开发的是单页面应用(spa),这里我需要他实现多页面的效果。什么意思呢?举个例子:我们在网页开发的时候,有时候点击一个连接,浏览器会新代开一个tab页来显示我们的内容,这个时候其实就出现多页面的情况了,新开的这个页面其实已经不属于我们之前的那个页面,(spa)其实是通过路由的方式,让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。

通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发,他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求,让webpack同时便于多个页面呢,其实还是比较简单的,只需要将webpack稍微改装一下,就完全可以了。

首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getentry = function(globpath) {
 var entries = {},
 basename, tmp, pathname;
 if (typeof (globpath) != "object") {
 globpath = [globpath]
 }
 globpath.foreach((itempath) => {
 glob.sync(itempath).foreach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  if (entry.split('/').length > 4) {
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
  } else {
  entries[basename] = entry;
  }
 });
 });
 return entries;
}

然后修改wenpack.base.conf.js文件,修改入口文件,原来的文件是单文件,现在需要将单文件入口改成多文件入口了。

webpack.dev.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectroot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getentry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.node_env
// various preprocessor loaders added to vue-loader at the end of this file
var csssourcemapdev = (env === 'development' && config.dev.csssourcemap)
var csssourcemapprod = (env === 'production' && config.build.productionsourcemap)
var usecsssourcemap = csssourcemapdev || csssourcemapprod
module.exports = {
 entry: entries,//这是通过前面新增的方法获取的文件路径对象
 output: {
 path: config.build.assetsroot,
 publicpath: process.env.node_env === 'production' ? config.build.assetspublicpath : config.dev.assetspublicpath,
 filename: '[name].js'
 }
 ...
}

下面需要修改webpack.dev,conf.js文件了,这里主要是修改原来配置的首页,这里需要配置多个页面

webpack.dev.conf.js

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var basewebpackconfig = require('./webpack.base.conf')
var htmlwebpackplugin = require('html-webpack-plugin')
object.keys(basewebpackconfig.entry).foreach(function (name) {
 basewebpackconfig.entry[name] = ['./build/dev-client'].concat(basewebpackconfig.entry[name])
})
module.exports = merge(basewebpackconfig, {
 ...
});
//新增
var pages =utils.getentry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 inject: true,    // js插入位置
 chunkssortmode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new htmlwebpackplugin(conf));
}

这里这要是改变了new htmlwebpackplugin的conf对象,原来的配置的是单个html,现在通过循环pages对象,生成多个html配置对象。

通过上面的配置,当我们执行npm run dev 的时候,webpack就可以同时便于多个页面,然后将前面wenpack.base.conf.js中配置的js文件,插入到对应的html页面中。

这个时候我们运行项目npm run dev 然后我们就可以访问不同的页面了,这里需要注意一下,既然我们需要管理多个页面,我们就应该在src下建立一个目录专门来访放不同的页面。这样项目结构看起来更加清晰,便于维护。

这是我写的一个demo地址,有兴趣的可以拉下来看看

运行起来后访问http://localhost:8080/module/index.html,然后点击按钮,打开新页面。

上面这样配置只是开发环境,最后生产环境的配置文件webpack.prod.conf.js也需要修改,这样在生产打包的时候就可以同时在dist中生成多个html文件。

webpack.prod.conf:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var basewebpackconfig = require('./webpack.base.conf')
var extracttextplugin = require('extract-text-webpack-plugin')
var htmlwebpackplugin = require('html-webpack-plugin')
var cleanplugin = require('clean-webpack-plugin')//webpack插件,用于清除目录文件
var env = config.build.env
var webpackconfig = merge(basewebpackconfig, {
...
}
//这里是修改的部分,和webpack.dev.conf.js的修改是一样的
module.exports = webpackconfig
var pages =utils.getentry(['./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
 filename: pathname + '.html',//生成 html 文件的文件名
 template: pages[pathname], // 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader,
 inject: true,    // 注入选项。有四个选项值 true, body, head, false.true:默认值,script标签位于html文件的 body 底部,body:同 true,head:script 标签位于 head 标签内,false:不插入生成的 js 文件,只是单纯的生成一个 html 文件
 // necessary to consistently work with multiple chunks via commonschunkplugin
 chunkssortmode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new htmlwebpackplugin(conf));
}

以上就是使用vue-cli脚手架来解决vue多页面开发的解决方案,希望对大家的学习有所帮助,也希望大家多多支持。