webpack.client.conf.js
2.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
const webpack = require('webpack');
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const pkg = require('../package.json');
let baseConfig = require('./webpack.base.conf');
const isProd = process.env.NODE_ENV === 'production';
const webpackConfig = merge(baseConfig, {
entry: {
app: './apps/entry-client.js'
},
optimization: {
runtimeChunk: true,
splitChunks: {
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
chunks: 'all',
cacheGroups: {
vendors: {
priority: -10,
chunks: 'all',
name: 'vendors',
test: /[\\/]node_modules[\\/]/
},
vue: {
priority: 1,
chunks: 'all',
name: 'vue',
test: /vue\.runtime\.esm/,
},
vuedep: {
priority: 1,
chunks: 'all',
name: 'vuedep',
test: /vue[-x]/,
},
swiper: {
priority: 1,
chunks: 'all',
name: 'swiper',
test: /swiper/,
}
}
}
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isProd
}
}]
}, {
test: /\.styl(us)?$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
'css-loader',
'postcss-loader',
{
loader: 'stylus-loader',
options: {
sourceMap: isProd,
'resolve url': true
}
}]
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/img/[name].[hash:7].[ext]'
}
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: 'static/img/[name].[hash:7].[ext]'
}
}
}
]
},
resolve: {
alias: {
'create-api': 'common/create-api-client.js'
}
},
plugins: [
new VueSSRClientPlugin({
filename: `yoho-ssr-client-${pkg.version}.json`
}),
new webpack.DefinePlugin({
'process.env.VUE_ENV': '"client"'
})
]
});
if (process.argv.some(a => a === '--report')) {
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
if (isProd) {
webpackConfig.plugins.push(
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash].css',
allChunks: true
})
);
}
module.exports = webpackConfig;