wekpack多頁面配置

首先配置多個頁面的入口，找config目錄index.js中

module.exports = {
	build: {
		
	},
	dev: {

	},
	multiPage: ['index', 'index2', 'index3'],
	
};

webpack.base.conf.js 文件中entry 配置多個

var config = require('../config');
function resolve(dir) {
	return path.join(__dirname, '..', dir);
}

function multiEntry() {
	var multiPage = config.multiPage;
	var obj = {};
	for (var i = 0, item; item = multiPage[i++];) {
		obj[item] = ['./src/pages/'+ item +'/index.js']
	}
	return obj;
}

module.exports = {
	entry: {
		babel: ['babel-polyfill'],
		...multiEntry(),
	},
}

webpack.dev.conf.js 中 plugins 配置

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var path = require('path');
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
	baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

function toHtmlWebpackPlugin() {
	var multiPage = config.multiPage;
	var result = [];
	for (var i = 0, item; item = multiPage[i++];) {
		let htmlWebpackPluginItem = new HtmlWebpackPlugin({
			title: config.title,
			filename: item + '.html',
			template: './src/pages/' + item + '/index.ejs',	//修改模板類型 爲ejs
			inject: true,
			chunksSortMode: 'dependency',
			chunks: ['manifest', item],
			css: config.externalsCss_dev,
			js: config.externalsJs_dev	// 開發環境是config.externalsJs_prod
		});
		result.push(htmlWebpackPluginItem)
	}
	return result;
}


module.exports = merge(baseWebpackConfig, {
	mode: 'development',
	module: {
		rules: utils.styleLoaders({ 
			sourceMap: config.dev.cssSourceMap,
		})
	},
	// cheap-module-eval-source-map is faster for development
	devtool: '#cheap-module-eval-source-map',
	plugins: [
		new webpack.DefinePlugin({
			'process.env': config.dev.env
		}),
		new ExtractTextPlugin({
			filename: utils.assetsPath('css/[name].css')
		}),
		...toHtmlWebpackPlugin(),
		
	]
})

webpack.prod.conf.js

var path = require('path');
var utils = require('./utils');
var webpack = require('webpack');
var config = require('../config');
var merge = require('webpack-merge');
var baseWebpackConfig = require('./webpack.base.conf');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
var MiniCssExtractPlugin  = require('mini-css-extract-plugin');

var env = process.env.NODE_ENV === 'testing'
	? require('../config/test.env')
	: config.build.env;


function toHtmlWebpackPlugin() {
	var multiPage = config.multiPage;
	var result = [];
	for (var i = 0, item; item = multiPage[i++];) {
		let htmlWebpackPluginItem = new HtmlWebpackPlugin({
			filename: process.env.NODE_ENV === 'testing'
				? item + '.html'
				: config.build.index(item),
			template: './src/pages/'+ item +'/index.ejs',
			title: config.title,
			minify: {
				removeComments: false,
				collapseWhitespace: false,
				removeAttributeQuotes: false
			},
			inject: true,
			chunks: ['manifest', item, 'styles'],
			chunksSortMode: 'none',
			css: config.externalsCss_prod,
			js: config.externalsJs_prod
		});
		result.push(htmlWebpackPluginItem)
	}
	return result;
}

var webpackConfig = merge(baseWebpackConfig, {
	mode: 'production',
	module: {
		rules: utils.styleLoaders({
			sourceMap: config.build.productionSourceMap,
			extract: true
		})
	},
	devtool: config.build.productionSourceMap ? '#source-map' : false,
	output: {
		path: config.build.assetsRoot,
		filename: utils.assetsPath('js/[name].js'),
		chunkFilename: utils.assetsPath('js/[name].js')
	},
	optimization: {
		runtimeChunk: {
			name: 'manifest'
		},
		splitChunks: {
			chunks: 'async',
			minSize: 30000,
			minChunks: 1,
			maxAsyncRequests: 5,
			maxInitialRequests: 3,
			name: false,
			cacheGroups: {
				vendor: {
					name: 'vendor',
					chunks: 'initial',
					priority: -10,
					reuseExistingChunk: false,
					test: /node_modules\/(.*)\.js/
				},
				styles: {
					name: 'styles',
					test: /\.(scss|less|css)$/,
					chunks: 'initial',
					minSize: 0,  
					minChunks: 2,
					priority: 0,
					reuseExistingChunk: true,
					enforce: true
				}
			}
		}
	},
	plugins: [
		// http://vuejs.github.io/vue-loader/en/workflow/production.html
		new webpack.DefinePlugin({
			'process.env': env
		}),

		//MiniCssExtractPlugin css into its own file
		new MiniCssExtractPlugin({
			filename: utils.assetsPath('css/[name].css')
		}),
	
		
		...toHtmlWebpackPlugin(),
		
	]
});


module.exports = webpackConfig;

page目錄結構如下

這樣就能打包出不同的多頁面項目了