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