這篇文章主要介紹了詳解webpack編譯多頁vue專案的設定問題，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
本文主要介紹了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位址，有興趣的可以拉下來看看vue-cli-multi-page
運行起來後訪問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));
}上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
以上是有關webpack專案配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
