134 lines
3.1 KiB
JavaScript
134 lines
3.1 KiB
JavaScript
const path = require('path')
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
const { VueLoaderPlugin } = require('vue-loader')
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
|
|
// 判断是否为生产环境
|
|
const is_production = process.env.NODE_ENV === 'production' || process.argv.includes('--mode=production')
|
|
|
|
module.exports = {
|
|
entry: './src/main.js',
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: 'js/[name].[contenthash:8].js',
|
|
chunkFilename: 'js/[name].[contenthash:8].chunk.js',
|
|
clean: true
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.vue$/,
|
|
loader: 'vue-loader'
|
|
},
|
|
{
|
|
test: /\.js$/,
|
|
loader: 'babel-loader',
|
|
exclude: /node_modules/
|
|
},
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
is_production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
|
|
'css-loader'
|
|
]
|
|
},
|
|
{
|
|
test: /\.(png|jpe?g|gif|svg)$/,
|
|
type: 'asset/resource',
|
|
generator: {
|
|
filename: 'images/[name].[hash:8][ext]'
|
|
}
|
|
},
|
|
{
|
|
test: /\.(woff2?|eot|ttf|otf)$/,
|
|
type: 'asset/resource',
|
|
generator: {
|
|
filename: 'fonts/[name].[hash:8][ext]'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
plugins: [
|
|
new VueLoaderPlugin(),
|
|
new HtmlWebpackPlugin({
|
|
template: './public/index.html',
|
|
title: 'Admin Framework Demo'
|
|
}),
|
|
...(is_production ? [
|
|
new MiniCssExtractPlugin({
|
|
filename: 'css/[name].[contenthash:8].css',
|
|
chunkFilename: 'css/[name].[contenthash:8].chunk.css'
|
|
})
|
|
] : [])
|
|
],
|
|
resolve: {
|
|
extensions: ['.js', '.vue', '.json'],
|
|
alias: {
|
|
'@': path.resolve(__dirname, 'src'),
|
|
'vue$': 'vue/dist/vue.esm.js'
|
|
}
|
|
},
|
|
devServer: {
|
|
hot: true,
|
|
open: true,
|
|
port: 8080,
|
|
historyApiFallback: true,
|
|
client: {
|
|
overlay: false // 禁用错误浮层
|
|
}
|
|
},
|
|
optimization: {
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
cacheGroups: {
|
|
// 分离 Vue 核心库
|
|
vue: {
|
|
name: 'vue',
|
|
test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
|
|
priority: 20,
|
|
reuseExistingChunk: true
|
|
},
|
|
// 分离 UI 库
|
|
ui: {
|
|
name: 'ui',
|
|
test: /[\\/]node_modules[\\/]view-design[\\/]/,
|
|
priority: 15,
|
|
reuseExistingChunk: true
|
|
},
|
|
// 分离图表库
|
|
echarts: {
|
|
name: 'echarts',
|
|
test: /[\\/]node_modules[\\/]echarts[\\/]/,
|
|
priority: 15,
|
|
reuseExistingChunk: true
|
|
},
|
|
// 分离其他第三方库
|
|
vendor: {
|
|
name: 'vendor',
|
|
test: /[\\/]node_modules[\\/]/,
|
|
priority: 10,
|
|
reuseExistingChunk: true
|
|
},
|
|
// 公共代码
|
|
common: {
|
|
name: 'common',
|
|
minChunks: 2,
|
|
priority: 5,
|
|
reuseExistingChunk: true
|
|
}
|
|
}
|
|
},
|
|
runtimeChunk: {
|
|
name: 'runtime'
|
|
}
|
|
},
|
|
stats: {
|
|
colors: true,
|
|
modules: false,
|
|
children: false,
|
|
chunks: false,
|
|
chunkModules: false
|
|
}
|
|
}
|
|
|