提交 | 用户 | age
|
3ac5f2
|
1 |
'use strict' |
J |
2 |
const path = require('path') |
|
3 |
const utils = require('./utils') |
|
4 |
const webpack = require('webpack') |
|
5 |
const config = require('../config') |
|
6 |
const merge = require('webpack-merge') |
|
7 |
const baseWebpackConfig = require('./webpack.base.conf') |
|
8 |
const CopyWebpackPlugin = require('copy-webpack-plugin') |
|
9 |
const HtmlWebpackPlugin = require('html-webpack-plugin') |
|
10 |
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
|
11 |
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') |
|
12 |
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') |
|
13 |
|
|
14 |
const env = process.env.NODE_ENV === 'testing' |
|
15 |
? require('../config/test.env') |
|
16 |
: require('../config/prod.env') |
|
17 |
|
|
18 |
const webpackConfig = merge(baseWebpackConfig, { |
|
19 |
module: { |
|
20 |
rules: utils.styleLoaders({ |
|
21 |
sourceMap: config.build.productionSourceMap, |
|
22 |
extract: true, |
|
23 |
usePostCSS: true |
|
24 |
}) |
|
25 |
}, |
|
26 |
devtool: config.build.productionSourceMap ? config.build.devtool : false, |
|
27 |
output: { |
|
28 |
path: config.build.assetsRoot, |
|
29 |
filename: utils.assetsPath('js/[name].[chunkhash].js'), |
|
30 |
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') |
|
31 |
}, |
|
32 |
plugins: [ |
|
33 |
// http://vuejs.github.io/vue-loader/en/workflow/production.html |
|
34 |
new webpack.DefinePlugin({ |
|
35 |
'process.env': env |
|
36 |
}), |
|
37 |
new UglifyJsPlugin({ |
|
38 |
uglifyOptions: { |
|
39 |
compress: { |
|
40 |
warnings: false |
|
41 |
} |
|
42 |
}, |
|
43 |
sourceMap: config.build.productionSourceMap, |
|
44 |
parallel: true |
|
45 |
}), |
|
46 |
// extract css into its own file |
|
47 |
new ExtractTextPlugin({ |
|
48 |
filename: utils.assetsPath('css/[name].[contenthash].css'), |
|
49 |
// Setting the following option to `false` will not extract CSS from codesplit chunks. |
|
50 |
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. |
|
51 |
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, |
|
52 |
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 |
|
53 |
allChunks: true, |
|
54 |
}), |
|
55 |
// Compress extracted CSS. We are using this plugin so that possible |
|
56 |
// duplicated CSS from different components can be deduped. |
|
57 |
new OptimizeCSSPlugin({ |
|
58 |
cssProcessorOptions: config.build.productionSourceMap |
|
59 |
? { safe: true, map: { inline: false } } |
|
60 |
: { safe: true } |
|
61 |
}), |
|
62 |
// generate dist index.html with correct asset hash for caching. |
|
63 |
// you can customize output by editing /index.html |
|
64 |
// see https://github.com/ampedandwired/html-webpack-plugin |
|
65 |
new HtmlWebpackPlugin({ |
|
66 |
filename: process.env.NODE_ENV === 'testing' |
|
67 |
? 'index.html' |
|
68 |
: config.build.index, |
|
69 |
template: 'index.html', |
|
70 |
inject: true, |
|
71 |
minify: { |
|
72 |
removeComments: true, |
|
73 |
collapseWhitespace: true, |
|
74 |
removeAttributeQuotes: true |
|
75 |
// more options: |
|
76 |
// https://github.com/kangax/html-minifier#options-quick-reference |
|
77 |
}, |
|
78 |
// necessary to consistently work with multiple chunks via CommonsChunkPlugin |
|
79 |
chunksSortMode: 'dependency' |
|
80 |
}), |
|
81 |
// keep module.id stable when vendor modules does not change |
|
82 |
new webpack.HashedModuleIdsPlugin(), |
|
83 |
// enable scope hoisting |
|
84 |
new webpack.optimize.ModuleConcatenationPlugin(), |
|
85 |
// split vendor js into its own file |
|
86 |
new webpack.optimize.CommonsChunkPlugin({ |
|
87 |
name: 'vendor', |
|
88 |
minChunks (module) { |
|
89 |
// any required modules inside node_modules are extracted to vendor |
|
90 |
return ( |
|
91 |
module.resource && |
|
92 |
/\.js$/.test(module.resource) && |
|
93 |
module.resource.indexOf( |
|
94 |
path.join(__dirname, '../node_modules') |
|
95 |
) === 0 |
|
96 |
) |
|
97 |
} |
|
98 |
}), |
|
99 |
// extract webpack runtime and module manifest to its own file in order to |
|
100 |
// prevent vendor hash from being updated whenever app bundle is updated |
|
101 |
new webpack.optimize.CommonsChunkPlugin({ |
|
102 |
name: 'manifest', |
|
103 |
minChunks: Infinity |
|
104 |
}), |
|
105 |
// This instance extracts shared chunks from code splitted chunks and bundles them |
|
106 |
// in a separate chunk, similar to the vendor chunk |
|
107 |
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk |
|
108 |
new webpack.optimize.CommonsChunkPlugin({ |
|
109 |
name: 'app', |
|
110 |
async: 'vendor-async', |
|
111 |
children: true, |
|
112 |
minChunks: 3 |
|
113 |
}), |
|
114 |
|
|
115 |
// copy custom static assets |
|
116 |
new CopyWebpackPlugin([ |
|
117 |
{ |
|
118 |
from: path.resolve(__dirname, '../static'), |
|
119 |
to: config.build.assetsSubDirectory, |
|
120 |
ignore: ['.*'] |
|
121 |
} |
|
122 |
]) |
|
123 |
] |
|
124 |
}) |
|
125 |
|
|
126 |
if (config.build.productionGzip) { |
|
127 |
const CompressionWebpackPlugin = require('compression-webpack-plugin') |
|
128 |
|
|
129 |
webpackConfig.plugins.push( |
|
130 |
new CompressionWebpackPlugin({ |
|
131 |
asset: '[path].gz[query]', |
|
132 |
algorithm: 'gzip', |
|
133 |
test: new RegExp( |
|
134 |
'\\.(' + |
|
135 |
config.build.productionGzipExtensions.join('|') + |
|
136 |
')$' |
|
137 |
), |
|
138 |
threshold: 10240, |
|
139 |
minRatio: 0.8 |
|
140 |
}) |
|
141 |
) |
|
142 |
} |
|
143 |
|
|
144 |
if (config.build.bundleAnalyzerReport) { |
|
145 |
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin |
|
146 |
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) |
|
147 |
} |
|
148 |
|
|
149 |
module.exports = webpackConfig |