Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8908b5b4 1 parent a3dd568a

多页面不同环境下可配置

Inline Side-by-side
Showing 5 changed files with 85 additions and 66 deletions
var dev = [{
title: '登录页',
page: 'login'
}];
module.exports = dev;
var prod = [{
title: '登录页',
page: 'login'
}];
module.exports = prod;
......@@ -5,7 +5,8 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"rm": "rm -rf dist/"
},
"dependencies": {
"axios": "^0.18.0",
......
/* jshint esversion: 6 */
const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path');
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// function resolve (dir) {
// return path.join(__dirname, './', dir)
......@@ -17,7 +17,7 @@ const externals = {
'$': 'jquery',
'jquery': 'Jquery',
'moment': 'moment'
}
};
const cdn = {
// 开发环境
......@@ -40,12 +40,51 @@ const cdn = {
'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js'
]
}
}
};
// 是否使用gzip
const productionGzip = true
const productionGzip = true;
// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css']
const productionGzipExtensions = ['js', 'css'];
// 多页模板页
var pages = {
// 默认页
index: {
entry: 'src/index.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
};
var prod_custom = require('./config/prod-custom');
var dev_custom = require('./config/dev-custom');
function getEntryPages (array) {
for (let i = 0; i < array.length; i++) {
pages[array[i].page] = {
// page 的入口
entry: `src/multiPages/${array[i].page}/${array[i].page}.js`,
// 模板来源
template: `public/${array[i].page}.html`,
// 在 dist/index.html 的输出
filename: `${array[i].page}.html`,
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: `${array[i].title}`,
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', array[i].page]
};
}
return pages;
}
if (process.env.NODE_ENV === 'production') {
pages = getEntryPages(prod_custom);
}
if (process.env.NODE_ENV === 'development') {
pages = getEntryPages(dev_custom);
}
module.exports = {
// 基本路径
......@@ -57,36 +96,7 @@ module.exports = {
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
filenameHashing: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
login: {
// page 的入口
entry: 'src/multiPages/login/login.js',
// 模板来源
template: 'public/login.html',
// 在 dist/index.html 的输出
filename: 'login.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '登录页',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'login']
}
},
pages,
// eslint-loader 是否在保存的时候检查
lintOnSave: 'error',
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了。
......@@ -105,25 +115,27 @@ module.exports = {
'axios': 'axios',
'moment': 'moment'
})
)
config.resolve.extensions.push('.less')
config.resolve.extensions.push('.css')
);
config.resolve.extensions.push('.less');
config.resolve.extensions.push('.css');
//
config.resolve.alias.src = path.resolve(__dirname, './src/src')
config.resolve.alias.assets = path.resolve(__dirname, './src/assets')
config.resolve.alias.components = path.resolve(__dirname, './src/components')
config.resolve.alias.src = path.resolve(__dirname, './src/src');
config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
config.resolve.alias.components = path.resolve(__dirname, './src/components');
// 修改webpack config, 使其不打包externals下的资源
if (process.env.NODE_ENV === 'production') {
// 1. 生产环境npm包转CDN
config.externals = externals
config.externals = externals;
// 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
productionGzip && config.plugins.push(
new CompressionWebpackPlugin({
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 8192,
minRatio: 0.8
})
)
if (productionGzip) {
config.plugins.push(
new CompressionWebpackPlugin({
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 8192,
minRatio: 0.8
})
);
}
}
if (process.env.NODE_ENV === 'development') {
}
......@@ -138,25 +150,19 @@ module.exports = {
.plugin('html-index')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
args[0].cdn = cdn.build;
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
return args;
})
.end()
.plugin('html-login')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
args[0].cdn = cdn.build;
}
return args
return args;
})
.end()
.end();
},
// css相关配置
css: {
......@@ -201,8 +207,8 @@ module.exports = {
'^/(.*)': '/$1'
},
onProxyReq: function (proxyReq, req, res, options) {
proxyReq.setHeader('X-Proxy-Host', req.header('host'))
proxyReq.setHeader('X-Proxy-Request-URI', req.url)
proxyReq.setHeader('X-Proxy-Host', req.header('host'));
proxyReq.setHeader('X-Proxy-Request-URI', req.url);
}
}
},
......@@ -216,4 +222,4 @@ module.exports = {
pluginOptions: {
// ...
}
}
};
......