long
2024-05-13 6e089f294207e13459ad872a2fb6e701721f5506
提交 | 用户 | 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