90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
const CompressionPlugin = require("compression-webpack-plugin");
|
|
const path = require("path");
|
|
const {VueLoaderPlugin} = require("vue-loader");
|
|
const TerserPlugin = require("terser-webpack-plugin");
|
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
|
|
|
module.exports = {
|
|
mode: 'production', // 生产模式,会开启 tree-shaking 和 压缩代码，以及其他优化
|
|
entry: {
|
|
list: '@/views/cmsList/index.ts',
|
|
detail: '@/views/cmsDetail/index.ts',
|
|
// ...
|
|
},
|
|
output: {
|
|
path: path.join(__dirname, '../dist'),
|
|
filename: '[name]/[name]_com.[chunkhash:8].chunk.js',
|
|
library: {
|
|
name: 'TempCom',
|
|
type: 'umd', // 使用 UMD 模式以支持多种引入方式
|
|
},
|
|
publicPath: '/',
|
|
clean: true,
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
include: [path.resolve(__dirname, '../src')],
|
|
test: /\.vue$/,
|
|
use: ['thread-loader', {
|
|
loader: 'vue-loader',
|
|
options: {
|
|
loaders: {
|
|
scss: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
|
css: ['vue-style-loader', 'css-loader']
|
|
}
|
|
}
|
|
}],
|
|
},
|
|
{
|
|
include: [path.resolve(__dirname, '../src')],
|
|
test: /\.(js|ts)$/,
|
|
use: ['thread-loader', 'babel-loader'],
|
|
},
|
|
{
|
|
test: /\.(css|scss)$/,
|
|
use: ["vue-style-loader", "css-loader", "sass-loader"],
|
|
},
|
|
]
|
|
},
|
|
plugins: [
|
|
new VueLoaderPlugin(), // vue-loader 插件
|
|
// 使用 CompressionPlugin 压缩静态资源
|
|
// new CompressionPlugin({
|
|
// algorithm: 'gzip', // 指定压缩算法
|
|
// test: /\.js(\?.*)?$/i, // 正则匹配需要压缩的文件
|
|
// threshold: 10240, // 对超过10k的数据进行压缩
|
|
// minRatio: 0.8, // 压缩比例
|
|
// deleteOriginalAssets: false, // 是否删除原文件
|
|
// }),
|
|
],
|
|
optimization: {
|
|
minimize: true,
|
|
minimizer: [
|
|
new TerserPlugin({
|
|
terserOptions: {
|
|
compress: {
|
|
// drop_console: true, // 移除所有的`console`语句
|
|
},
|
|
output: {
|
|
comments: false, // 去掉注释
|
|
},
|
|
},
|
|
extractComments: false, // 不从代码中提取注释
|
|
}),
|
|
new CssMinimizerPlugin(),
|
|
],
|
|
},
|
|
resolve: {
|
|
// 如果用的是pnpm 就暂时不要配置这个，会有幽灵依赖的问题，访问不到很多模块
|
|
// 查找第三方模块只在本项目的node_modules中查找
|
|
modules: [path.resolve(__dirname, '../node_modules')],
|
|
extensions: ['.vue', '.ts', '.js', '.json'],
|
|
alias: {
|
|
'@': path.join(__dirname, '../src')
|
|
}
|
|
},
|
|
cache: {
|
|
type: 'filesystem', // 使用文件缓存
|
|
},
|
|
} |