vue中如何配置多页面配置
2018-12-16 本文已影响0人
ybrelax
webpack 有个特性,基本的功能都是可以用配置去实现的,所以就造成一个特点“很容易忘记它”,所以就很有必要记录一下
简述一下
webpack 分为
- Entry:入口
- Output: 出口
- Module 模块
- Plugin 插件
- DevServer 服务器配置
/*
title: 多页面输出配置
auth: yaobo
date: 2018/10/19
*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const glob = require('glob');
const pathSrc = path.resolve(__dirname, '../src');
// 指定开发模式下运行某模块;多个加载,可能会加载偏慢
/**
* index: 个人中心; active 活动; product 产品; policyManager 保单管理; all 有此字段为加载全部
*/
const devMolues = ['policyManager']
exports.getEntrys = function(suffix, polyfill) {
// 自动获取
let entryHtml = glob.sync(pathSrc + '/views/**/app.js');
let entries = {};
entryHtml.forEach((filePath) => {
// views/product/app.html
let _chunk = filePath.split(pathSrc.replace(/\\/g, '/'))[1];
_chunk = _chunk.substring(0, _chunk.lastIndexOf('/'));
_chunk = _chunk.substring(_chunk.lastIndexOf('/') + 1, _chunk.length);
if (process.env.NODE_ENV !== 'production') {
let flag = false;
for (let item of devMolues) {
if (item === _chunk || item === 'all') {
flag = true;
}
}
if (flag) {
if (suffix == 'html') {
entries[_chunk] = filePath.replace(/.js/g, '.html');
}
if (suffix == 'js') {
entries[_chunk] = filePath;
}
}
} else {
if (suffix == 'html') {
entries[_chunk] = filePath.replace(/.js/g, '.html');
}
if (suffix == 'js') {
entries[_chunk] = filePath;
}
}
})
return entries;
}
exports.htmlPlugins = () => {
let entryHtmls = this.getEntrys('html');
let arrPull = [];
for (let _chunk in entryHtmls) {
let conf = {};
if (process.env.NODE_ENV === 'production') {
conf = {
filename: _chunk + '.html',
template: 'index.html', // entryHtmls[_chunk] // 引入同一个文件
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
chunks: ['manifest', 'vendor', _chunk]
}
} else {
conf = {
filename: _chunk + '.html',
template: 'index.html',
inject: true,
chunks: [_chunk]
}
}
arrPull.push(new HtmlWebpackPlugin(conf));
}
return arrPull;
}
实现这个主要是整合了 HtmlWebpackPlugin插件, 这个插件是webpack,用来生成对应的html文件的
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https: //github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true,
// chunks: ['app']
// }),
// copy custom static assets
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}])
].concat(mutiplePageConfig.htmlPlugins())