/
webpack.client.conf.js
123 lines (111 loc) · 4.06 KB
/
webpack.client.conf.js
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
121
122
123
/**
* @file 生产环境 webpack client配置文件
* @author *__ author __*{% if: *__ email __* %}(*__ email __*){% /if %}
*/
const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const SwRegisterWebpackPlugin = require('sw-register-webpack-plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const env = process.env.NODE_ENV === 'production'
? config.build.env
: config.dev.env;
let webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env.VUE_ENV': '"client"',
'process.env': env
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource
&& /\.js$/.test(module.resource)
&& module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
);
}
/* eslint-enable fecs-use-method-definition */
}),
// split vue, vue-router and vuex into vue chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'vue',
minChunks(module, count) {
let context = module.context;
let targets = ['vue', 'vue-router', 'vuex'];
return context
&& context.indexOf('node_modules') >= 0
&& targets.find(t => new RegExp('/' + t + '/', 'i').test(context));
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vue']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
new VueSSRClientPlugin()
]
});
if (process.env.NODE_ENV === 'production') {
webpackConfig.plugins = [
...webpackConfig.plugins,
// service worker caching
new SWPrecacheWebpackPlugin(config.swPrecache.build),
new SwRegisterWebpackPlugin({
prefix: '/',
filePath: path.resolve(__dirname, '../src/sw-register.js')
})
];
}
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(''
+ '\\.('
+ config.build.productionGzipExtensions.join('|')
+ ')$'
),
threshold: 10240,
minRatio: 0.8
})
);
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;