Guest User

Webpack prod

a guest
Jan 4th, 2019
181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 'use strict'
  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 =
  15.   process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env')
  16.  
  17. const webpackConfig = merge(baseWebpackConfig, {
  18.   module: {
  19.     rules: utils.styleLoaders({
  20.       sourceMap: config.build.productionSourceMap,
  21.       extract: true,
  22.       usePostCSS: true
  23.     })
  24.   },
  25.   devtool: config.build.productionSourceMap ? config.build.devtool : false,
  26.   output: {
  27.     path: config.build.assetsRoot,
  28.     filename: utils.assetsPath('js/[name].js'),
  29.     chunkFilename: utils.assetsPath('js/[id].js')
  30.   },
  31.   plugins: [
  32.     // http://vuejs.github.io/vue-loader/en/workflow/production.html
  33.     new webpack.DefinePlugin({
  34.       'process.env': env
  35.     }),
  36.     new UglifyJsPlugin({
  37.       uglifyOptions: {
  38.         compress: {
  39.           warnings: false
  40.         }
  41.       },
  42.       sourceMap: config.build.productionSourceMap,
  43.       parallel: true
  44.     }),
  45.     // extract css into its own file
  46.     new ExtractTextPlugin({
  47.       filename: utils.assetsPath('css/[name].css'),
  48.       // Setting the following option to `false` will not extract CSS from codesplit chunks.
  49.       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
  50.       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
  51.       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
  52.       allChunks: true
  53.     }),
  54.     // Compress extracted CSS. We are using this plugin so that possible
  55.     // duplicated CSS from different components can be deduped.
  56.     new OptimizeCSSPlugin({
  57.       cssProcessorOptions: config.build.productionSourceMap
  58.         ? {
  59.             safe: true,
  60.             map: {
  61.               inline: false
  62.             }
  63.           }
  64.         : {
  65.             safe: true
  66.           }
  67.     }),
  68.     // generate dist index.html with correct asset hash for caching.
  69.     // you can customize output by editing /index.html
  70.     // see https://github.com/ampedandwired/html-webpack-plugin
  71.     new HtmlWebpackPlugin({
  72.       filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
  73.       template: 'index.html',
  74.       inject: true,
  75.       minify: {
  76.         removeComments: true,
  77.         collapseWhitespace: true,
  78.         removeAttributeQuotes: true
  79.         // more options:
  80.         // https://github.com/kangax/html-minifier#options-quick-reference
  81.       },
  82.       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  83.       chunksSortMode: 'dependency'
  84.     }),
  85.     // keep module.id stable when vendor modules does not change
  86.     new webpack.HashedModuleIdsPlugin(),
  87.     // enable scope hoisting
  88.     new webpack.optimize.ModuleConcatenationPlugin(),
  89.  
  90.     // copy custom static assets
  91.     new CopyWebpackPlugin([
  92.       {
  93.         from: path.resolve(__dirname, '../static'),
  94.         to: config.build.assetsSubDirectory,
  95.         ignore: ['.*']
  96.       }
  97.     ])
  98.   ]
  99. })
  100.  
  101. if (config.build.productionGzip) {
  102.   const CompressionWebpackPlugin = require('compression-webpack-plugin')
  103.  
  104.   webpackConfig.plugins.push(
  105.     new CompressionWebpackPlugin({
  106.       asset: '[path].gz[query]',
  107.       algorithm: 'gzip',
  108.       test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
  109.       threshold: 10240,
  110.       minRatio: 0.8
  111.     })
  112.   )
  113. }
  114.  
  115. if (config.build.bundleAnalyzerReport) {
  116.   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  117.   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  118. }
  119.  
  120. module.exports = webpackConfig
Advertisement
Add Comment
Please, Sign In to add comment