vue - webpack.prod.conf.js

描述：webpack打包项目时的配置文件.

命令：yarn run build 或 npm run build

打包后，生成的文件在dist文件夹下

打包后，要在服务器环境下运行！！！

关于怎样运行，请查看：https://www.cnblogs.com/cisum/p/9370163.html ,

 'use strict'

 // 路径
 const path = require('path')
 // utils
 const utils = require('./utils')
 // webpack打包
 const webpack = require('webpack')
 // 来自cofig/index.js
 const config = require('../config')
 // 对象合并
 const merge = require('webpack-merge')
 // webpack基本配置
 const baseWebpackConfig = require('./webpack.base.conf')

 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

 const env = require('../config/prod.env')

 const webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
       extract: true,
       usePostCSS: true
     })
   },
   devtool: config.build.productionSourceMap ? config.build.devtool : 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': env
     }),
     // 混淆加密JavaScript
     new UglifyJsPlugin({
       uglifyOptions: {
         compress: {
           warnings: false
         }
       },
       sourceMap: config.build.productionSourceMap,
       parallel: true
     }),
     // 将css提取到自己的文件中
     new ExtractTextPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css'),
       //将以下选项设置为“false”将不会从codesplit块中提取CSS。
       //当webpack加载了codesplit块时，他们的CSS将使用style-loader动态插入。
       //它当前设置为“true”，因为我们看到源代码包含在codesplit包中，当它是“false”时，
       //增加文件大小：https：//github.com/vuejs-templates/webpack/issues/1110
       allChunks: true,
     }),
     //压缩提取的CSS。 我们正在使用这个插件，以便可能
     //可以删除来自不同组件的重复CSS。
     new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
         ? { safe: true, map: { inline: false } }
         : { safe: true }
     }),
     //使用正确的资产哈希生成dist index.html以进行缓存。
     //您可以通过编辑/index.html来自定义输出
     new HtmlWebpackPlugin({
       filename: config.build.index,
       template: 'index.html',
       inject: true,
       minify: {
         removeComments: true,
         collapseWhitespace: true,
         removeAttributeQuotes: true
         // 更多选项:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
       // 通过CommonsChunkPlugin持续使用多个块的必要条件
       chunksSortMode: 'dependency'
     }),
     // 原本模块没有改变时，保持module.id稳定
     new webpack.HashedModuleIdsPlugin(),
     // enable scope hoisting
     new webpack.optimize.ModuleConcatenationPlugin(),
     // 将原本模块js拆分为自己的文件
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks(module) {
         // node_modules中的任何必需模块都将解压缩到原模块
         return (
           module.resource &&
           /\.js$/.test(module.resource) &&
           module.resource.indexOf(
             path.join(__dirname, '../node_modules')
           ) === 0
         )
       }
     }),

     //将webpack运行时和模块清单提取到自己的文件中
     //每当应用程序包更新时，都会阻止更新供应商哈希
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       minChunks: Infinity
     }),

     //此实例从代码拆分块中提取共享块并捆绑它们
     //在一个单独的块中，类似于供应商块
     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
     new webpack.optimize.CommonsChunkPlugin({
       name: 'app',
       async: 'vendor-async',
       children: true,
       minChunks: 3
     }),

     // 复制自定义静态目录
     new CopyWebpackPlugin([
       {
         from: path.resolve(__dirname, '../static'),
         to: config.build.assetsSubDirectory,
         ignore: ['.*']
       }
     ])
   ]
 })

 // 配置Gzip压缩
 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
     })
   )
 }

 // 使用交互式可缩放树形图可视化webpack输出文件的大小
 if (config.build.bundleAnalyzerReport) {
   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }

 module.exports = webpackConfig

11