119 lines
3.0 KiB
JavaScript
119 lines
3.0 KiB
JavaScript
const path = require('path')
|
||
const webpack = require('webpack')
|
||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||
const { VueLoaderPlugin } = require('vue-loader')
|
||
|
||
module.exports = (env, argv) => {
|
||
// 仅当传入 env_file 时加载 .env（build:sit / build:prod），否则 dev 用 development，build 用 prod
|
||
const envFile = env && env.env_file
|
||
if (envFile) {
|
||
require('dotenv').config({ path: path.resolve(__dirname, envFile) })
|
||
}
|
||
const buildEnv = process.env.BUILD_ENV || (argv.mode === 'production' ? 'prod' : 'development')
|
||
return {
|
||
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
|
||
},
|
||
optimization: {
|
||
splitChunks: {
|
||
chunks: 'all',
|
||
minSize: 20000,
|
||
maxSize: 244000,
|
||
cacheGroups: {
|
||
// Vue 相关库单独打包
|
||
vue: {
|
||
test: /[\\/]node_modules[\\/](vue|vue-router|vuex|vue-loader|vue-template-compiler)[\\/]/,
|
||
name: 'vue',
|
||
priority: 30,
|
||
reuseExistingChunk: true
|
||
},
|
||
// UI 库单独打包
|
||
ui: {
|
||
test: /[\\/]node_modules[\\/](view-design|iview)[\\/]/,
|
||
name: 'ui',
|
||
priority: 25,
|
||
reuseExistingChunk: true
|
||
},
|
||
// 其他第三方库打包
|
||
vendor: {
|
||
test: /[\\/]node_modules[\\/]/,
|
||
name: 'vendors',
|
||
priority: 10,
|
||
reuseExistingChunk: true
|
||
},
|
||
// 公共代码
|
||
common: {
|
||
name: 'common',
|
||
minChunks: 2,
|
||
priority: 5,
|
||
reuseExistingChunk: true
|
||
}
|
||
}
|
||
},
|
||
// 运行时代码单独打包
|
||
runtimeChunk: {
|
||
name: 'runtime'
|
||
},
|
||
// 生产环境启用压缩
|
||
minimize: process.env.NODE_ENV === 'production'
|
||
},
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /\.vue$/,
|
||
loader: 'vue-loader'
|
||
},
|
||
{
|
||
test: /\.js$/,
|
||
loader: 'babel-loader',
|
||
exclude: /node_modules/
|
||
},
|
||
{
|
||
test: /\.css$/,
|
||
use: ['vue-style-loader', 'css-loader']
|
||
},
|
||
{
|
||
test: /\.less$/,
|
||
use: ['vue-style-loader', 'css-loader', 'less-loader']
|
||
},
|
||
{
|
||
test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/,
|
||
type: 'asset/resource',
|
||
generator: {
|
||
filename: 'assets/[name].[hash:8][ext]'
|
||
}
|
||
}
|
||
]
|
||
},
|
||
plugins: [
|
||
new webpack.DefinePlugin({
|
||
__APP_BUILD_ENV__: JSON.stringify(buildEnv),
|
||
'process.env.BUILD_ENV': JSON.stringify(buildEnv)
|
||
}),
|
||
new VueLoaderPlugin(),
|
||
new HtmlWebpackPlugin({
|
||
template: './public/index.html',
|
||
title: '管理后台'
|
||
})
|
||
],
|
||
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
|
||
}
|
||
}
|
||
}
|
||
|