@maddragon/wptool
Version:
项目开发通用工具类封装:webpack
246 lines (245 loc) • 9.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/**
* @Time : 2020/8/13 18:26
* @Author : Mad Dragon
* @EMail : 395548460@qq.com
* @Version ：V 0.0.1
* @File : webpack.ts
* @Title : webpack 工具类
* @desc :
** 我不懂什么叫年少轻狂，只知道胜者为王 **
┏┓ ┏┓
┏┛┻━━━┛┻┓
┃ ☃ ┃
┃ ┳┛ ┗┳ ┃
┃ ┻ ┃
┗━┓ ┏━┛
┃ ┗━━━┓
┃ 神兽保佑 ┣┓
┃ 永无BUG！ ┏┛
┗┓┓┏━┳┓┏┛
┃┫┫ ┃┫┫
┗┻┛ ┗┻┛
**/
const TerserPlugin = require('terser-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const getPageConfig = (key) => {
return {
// page 的入口
entry: `src/pages/${key}/main.ts`,
// 模板来源
template: `src/pages/${key}/index.html`,
// 在 dist/ui.html 的输出
filename: `${key}.html`,
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: `${key}`,
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'ptool', 'vue-cobweb', 'element-ui', 'vant', 'echarts', 'view-design', 'vendors', `${key}`]
};
};
exports.default = {
// 多页面入口自动扫描
setPages: (files, model = '') => {
let pages = {
index: {
// 修改项目的入口文件
entry: 'src/main.ts',
template: 'public/index.html',
filename: 'index.html'
}
};
try {
pages = {};
files.forEach((f) => {
const key = f.split('/').pop();
if (model && model === key) {
pages = {};
// @ts-ignore
pages[key] = getPageConfig(key);
throw Error();
}
else {
// @ts-ignore
pages[key] = getPageConfig(key);
}
});
}
catch (e) {
}
return pages;
},
// 打包配置
setPack: (config, version, openGzip = false, deleteOriginalAssets = false) => {
version = version.replace(/\./g, '-');
if (openGzip) {
config.plugins.push(new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.css$|\.ttf$|\.html$|\.svg$|\.json$|\.js$/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: deleteOriginalAssets // 删除原文件
}));
}
// 将每个依赖包打包成单独的js文件
return {
performance: {
hints: 'error',
maxEntrypointSize: 10000000,
maxAssetSize: 30000000,
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
output: Object.assign(Object.assign({}, config.output), { filename: `static/js/[name]-[chunkhash]-${version}.js`, chunkFilename: `static/js/[name]-[chunkhash]-${version}.js` }),
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
sourceMap: true,
terserOptions: {
compress: {
pure_funcs: ['console.log']
}
}
})
],
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
'element-ui': {
chunks: 'all',
name: 'element-ui',
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
'vant': {
chunks: 'all',
name: 'vant',
test: /[\\/]node_modules[\\/]vant[\\/]/,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
echarts: {
chunks: 'all',
name: 'echarts',
test: /[\\/]node_modules[\\/]echarts[\\/]/,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 70
},
'view-design': {
chunks: 'all',
name: 'view-design',
test: /[\\/]node_modules[\\/]view-design[\\/]/,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 80
},
'vue-cobweb': {
chunks: 'all',
name: 'vue-cobweb',
test: /[\\/]node_modules[\\/]vue-cobweb[\\/]/,
minChunks: 1,
maxInitialRequests: 3,
minSize: 0,
priority: 90
},
ptool: {
chunks: 'all',
name: 'ptool',
test: /[\\/]node_modules[\\/]ptool[\\/]/,
minChunks: 1,
maxInitialRequests: 3,
minSize: 0,
priority: 100
},
vendors: {
chunks: 'all',
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: -20
}
}
}
},
plugins: [
...config.plugins
]
};
return {};
},
defaultPack: (projectname) => {
return {
devServer: {
open: false,
host: '0.0.0.0',
port: 8082,
https: false,
disableHostCheck: true,
overlay: {
warnings: true,
errors: true
},
proxy: {
'/api/weather/': {
target: `https://api.seniverse.com/v3`,
changeOrigin: true,
// ws: true,
pathRewrite: {
'^/api': ''
}
},
'/api/': {
target: `${process.env.VUE_APP_BASE_API}`,
changeOrigin: true,
// ws: true,
pathRewrite: {
'^/api/': ''
}
}
}
},
publicPath: '/' + `${projectname}`,
assetsDir: 'static',
outputDir: 'dist' + `/${projectname}`,
lintOnSave: 'error',
transpileDependencies: ['biyi-admin'],
productionSourceMap: false,
css: {
extract: false,
sourceMap: false,
loaderOptions: {
less: {
javascriptEnabled: true
},
css: {},
postcss: {}
},
requireModuleExtension: true
},
parallel: require('os').cpus().length > 1,
pwa: {},
pluginOptions: {}
};
}
};