詳解webpack編譯多頁面vue項目的配置問題

更新時間：2017年12月11日 10:08:19 作者：_gunner_

本篇文章主要介紹了詳解webpack編譯多頁面vue項目的配置問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文主要介紹了webpack編譯多頁面vue項目的配置問題，分享給大家，具體如下：

一般情況下，構(gòu)建一個vue項目的步驟為：

1，安裝nodejs環(huán)境

2，安裝vue-cli

cnpm install vue-cli -g

3，構(gòu)建vue項目

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

4，安裝項目依賴包

cnpm install

5，在開發(fā)環(huán)境下運行該項目：

npm run dev

通過上面這幾步一個簡單的vue項目的開發(fā)環(huán)境基本就搭建起來，接下來的工作就是填代碼了。

最近在做一個前端代碼重構(gòu)的時候發(fā)現(xiàn)一個問題，使用這個腳手架構(gòu)建的項目滿足不了我的需求，其實這個需求有一點違背我們vue的初衷的，vue開發(fā)的是單頁面應(yīng)用(SPA),這里我需要他實現(xiàn)多頁面的效果。什么意思呢？舉個例子：我們在網(wǎng)頁開發(fā)的時候，有時候點擊一個連接，瀏覽器會新代開一個tab頁來顯示我們的內(nèi)容，這個時候其實就出現(xiàn)多頁面的情況了，新開的這個頁面其實已經(jīng)不屬于我們之前的那個頁面，(SPA)其實是通過路由的方式，讓多個頁面在主頁面中顯示。但是這個時候新開的頁面已經(jīng)脫離主頁面了。

通過vue-cli腳手架構(gòu)建的項目的webpack配置文件支持單頁面的應(yīng)用開發(fā)，他只有一個入口文件。而且最后只會生產(chǎn)一個頁面。如何才能滿足我的需求，讓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文件，修改入口文件，原來的文件是單文件，現(xiàn)在需要將單文件入口改成多文件入口了。

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,現(xiàn)在通過循環(huán)pages對象，生成多個html配置對象。

通過上面的配置，當我們執(zhí)行npm run dev 的時候，webpack就可以同時便于多個頁面，然后將前面wenpack.base.conf.js中配置的js文件，插入到對應(yīng)的html頁面中。

這個時候我們運行項目npm run dev 然后我們就可以訪問不同的頁面了，這里需要注意一下，既然我們需要管理多個頁面，我們就應(yīng)該在src下建立一個目錄專門來訪放不同的頁面。這樣項目結(jié)構(gòu)看起來更加清晰，便于維護。

這是我寫的一個demo地址，有興趣的可以拉下來看看vue-cli-multi-page

運行起來后訪問http://localhost:8080/module/index.html,然后點擊按鈕，打開新頁面。

上面這樣配置只是開發(fā)環(huán)境，最后生產(chǎn)環(huán)境的配置文件webpack.prod.conf.js也需要修改，這樣在生產(chǎn)打包的時候就可以同時在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], // 根據(jù)自己的指定的模板文件來生成特定的 html 文件。這里的模板類型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時，需要提前安裝對應(yīng)的 loader，
 inject: true,    // 注入選項。有四個選項值 true, body, head, false.true:默認值，script標簽位于html文件的 body 底部,body:同 true,head:script 標簽位于 head 標簽內(nèi),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多頁面開發(fā)的解決方案，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: