vue - webpack.prod.conf.js

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

命令：yarn run build 或 npm run build

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

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

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

  1 ‘use strict‘
  2
  3 // 路径
  4 const path = require(‘path‘)
  5 // utils
  6 const utils = require(‘./utils‘)
  7 // webpack打包
  8 const webpack = require(‘webpack‘)
  9 // 来自cofig/index.js
 10 const config = require(‘../config‘)
 11 // 对象合并
 12 const merge = require(‘webpack-merge‘)
 13 // webpack基本配置
 14 const baseWebpackConfig = require(‘./webpack.base.conf‘)
 15
 16 const CopyWebpackPlugin = require(‘copy-webpack-plugin‘)
 17 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
 18 const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
 19 const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)
 20 const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)
 21
 22
 23 const env = require(‘../config/prod.env‘)
 24
 25 const webpackConfig = merge(baseWebpackConfig, {
 26   module: {
 27     rules: utils.styleLoaders({
 28       sourceMap: config.build.productionSourceMap,
 29       extract: true,
 30       usePostCSS: true
 31     })
 32   },
 33   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 34   output: {
 35     path: config.build.assetsRoot,
 36     filename: utils.assetsPath(‘js/[name].[chunkhash].js‘),
 37     chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘)
 38   },
 39   plugins: [
 40     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 41     new webpack.DefinePlugin({
 42       ‘process.env‘: env
 43     }),
 44     // 混淆加密JavaScript
 45     new UglifyJsPlugin({
 46       uglifyOptions: {
 47         compress: {
 48           warnings: false
 49         }
 50       },
 51       sourceMap: config.build.productionSourceMap,
 52       parallel: true
 53     }),
 54     // 将css提取到自己的文件中
 55     new ExtractTextPlugin({
 56       filename: utils.assetsPath(‘css/[name].[contenthash].css‘),
 57       //将以下选项设置为“false”将不会从codesplit块中提取CSS。
 58       //当webpack加载了codesplit块时，他们的CSS将使用style-loader动态插入。
 59       //它当前设置为“true”，因为我们看到源代码包含在codesplit包中，当它是“false”时，
 60       //增加文件大小：https：//github.com/vuejs-templates/webpack/issues/1110
 61       allChunks: true,
 62     }),
 63     //压缩提取的CSS。 我们正在使用这个插件，以便可能
 64     //可以删除来自不同组件的重复CSS。
 65     new OptimizeCSSPlugin({
 66       cssProcessorOptions: config.build.productionSourceMap
 67         ? { safe: true, map: { inline: false } }
 68         : { safe: true }
 69     }),
 70     //使用正确的资产哈希生成dist index.html以进行缓存。
 71     //您可以通过编辑/index.html来自定义输出
 72     new HtmlWebpackPlugin({
 73       filename: config.build.index,
 74       template: ‘index.html‘,
 75       inject: true,
 76       minify: {
 77         removeComments: true,
 78         collapseWhitespace: true,
 79         removeAttributeQuotes: true
 80         // 更多选项:
 81         // https://github.com/kangax/html-minifier#options-quick-reference
 82       },
 83       // 通过CommonsChunkPlugin持续使用多个块的必要条件
 84       chunksSortMode: ‘dependency‘
 85     }),
 86     // 原本模块没有改变时，保持module.id稳定
 87     new webpack.HashedModuleIdsPlugin(),
 88     // enable scope hoisting
 89     new webpack.optimize.ModuleConcatenationPlugin(),
 90     // 将原本模块js拆分为自己的文件
 91     new webpack.optimize.CommonsChunkPlugin({
 92       name: ‘vendor‘,
 93       minChunks(module) {
 94         // node_modules中的任何必需模块都将解压缩到原模块
 95         return (
 96           module.resource &&
 97           /\.js$/.test(module.resource) &&
 98           module.resource.indexOf(
 99             path.join(__dirname, ‘../node_modules‘)
100           ) === 0
101         )
102       }
103     }),
104
105     //将webpack运行时和模块清单提取到自己的文件中
106     //每当应用程序包更新时，都会阻止更新供应商哈希
107     new webpack.optimize.CommonsChunkPlugin({
108       name: ‘manifest‘,
109       minChunks: Infinity
110     }),
111
112     //此实例从代码拆分块中提取共享块并捆绑它们
113     //在一个单独的块中，类似于供应商块
114     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
115     new webpack.optimize.CommonsChunkPlugin({
116       name: ‘app‘,
117       async: ‘vendor-async‘,
118       children: true,
119       minChunks: 3
120     }),
121
122     // 复制自定义静态目录
123     new CopyWebpackPlugin([
124       {
125         from: path.resolve(__dirname, ‘../static‘),
126         to: config.build.assetsSubDirectory,
127         ignore: [‘.*‘]
128       }
129     ])
130   ]
131 })
132
133
134 // 配置Gzip压缩
135 if (config.build.productionGzip) {
136   const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)
137
138   webpackConfig.plugins.push(
139     new CompressionWebpackPlugin({
140       asset: ‘[path].gz[query]‘,
141       algorithm: ‘gzip‘,
142       test: new RegExp(
143         ‘\\.(‘ +
144         config.build.productionGzipExtensions.join(‘|‘) +
145         ‘)$‘
146       ),
147       threshold: 10240,
148       minRatio: 0.8
149     })
150   )
151 }
152
153 // 使用交互式可缩放树形图可视化webpack输出文件的大小
154 if (config.build.bundleAnalyzerReport) {
155   const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
156   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
157 }
158
159 module.exports = webpackConfig

11

原文地址：https://www.cnblogs.com/cisum/p/9612553.html