Vue进阶（五十三）：vue-cli 脚手架 webpack.prod.conf.js 配置文件详解

文章目录

一、前言
二、optimize-css-assets-webpack-plugin 插件
三、拓展阅读

一、前言

webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。

由于这是一个系统的配置文件，将涉及很多模块和插件，所以这部分内容将分多个文章讲解，请关注博主其他文章。

// 下面是引入nodejs的路径模块
var path = require('path')
// 下面是utils工具配置文件，主要用来处理css类文件的loader
var utils = require('./utils')
// 下面引入webpack，来使用webpack内置插件
var webpack = require('webpack')
// 下面是config目录下的index.js配置文件，主要用来定义了生产和开发环境的相关基础配置
var config = require('../config')
// 下面是webpack的merger插件，主要用来处理配置对象合并的，可以将一个大的配置对象拆分成几个小的，合并，相同项将覆盖。
var merge = require('webpack-merge')
// 下面是webpack.base.conf.js配置文件，我其他博客文章已经解释过了，用来处理不同类型文件的loader。
var baseWebpackConfig = require('./webpack.base.conf')
// copy-webpack-plugin使用来复制文件或者文件夹到指定的目录。
var CopyWebpackPlugin = require('copy-webpack-plugin')
// html-webpack-plugin是生成html文件，可以设置模板，之前详细讲过。
var HtmlWebpackPlugin = require('html-webpack-plugin')
// extract-text-webpack-plugin这个插件是用来将bundle中的css等文件产出单独的bundle文件，之前详细讲过。
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// optimize-css-assets-webpack-plugin插件的作用是压缩css代码，还能去掉extract-text-webpack-plugin插件抽离文件产生的重复代码，因为同一个css可能在多个模块中出现所以会导致重复代码，换句话说这两个插件是两兄弟。
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')// 如果当前环境变量NODE_ENV的值是testing，则导入 test.env.js配置文，设置env为"testing"
// 如果当前环境变量NODE_ENV的值不是testing，则设置env为"production"
var env = process.env.NODE_ENV === 'testing'? require('../config/test.env'): config.build.env// 把当前配置对象和基础配置对象合并
var webpackConfig = merge(baseWebpackConfig, {module: {// 下面就是把utils配置好的处理各种css类型的配置拿过来，和dev设置一样，就是这里多了个extract:true，此项是自定义项，设置为true表示，生成独立的文件.rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true})},// devtool开发工具，用来生成个sourcemap方便调试// 按理说这里不用生成sourcemap多此一举，这里生成了source-map类型的map文件，只用于生产环境.devtool: config.build.productionSourceMap ? '#source-map' : false,output: {// 打包后的文件放在dist目录里面path: config.build.assetsRoot,// 文件名称使用 static/js/[name].[chunkhash].js, 其中name就是main,chunkhash就是模块的hash值，用于浏览器缓存.filename: utils.assetsPath('js/[name].[chunkhash].js'),// chunkFilename是非入口模块文件，也就是说filename文件中引用了chunckFilenamechunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [// http://vuejs.github.io/vue-loader/en/workflow/production.html// 下面是利用DefinePlugin插件，定义process.env环境变量为envnew webpack.DefinePlugin({'process.env': env}),new webpack.optimize.UglifyJsPlugin({// UglifyJsPlugin插件是专门用来压缩js文件的.compress: {warnings: false // 禁止压缩时候的警告信息，给用户一种vue高大上没有错误的感觉},// 压缩后生成map文件sourceMap: true}),// extract css into its own filenew ExtractTextPlugin({// 生成独立的css文件，下面是生成独立css文件的名称filename: utils.assetsPath('css/[name].[contenthash].css')}),// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({// 压缩css文件cssProcessorOptions: {safe: true}}),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// see https://github.com/ampedandwired/html-webpack-plugin// 生成html页面new HtmlWebpackPlugin({//非测试环境生成index.htmlfilename: process.env.NODE_ENV === 'testing'? 'index.html': config.build.index,// 模板是index.html加不加无所谓template: 'index.html',// 将js文件放到body标签的结尾inject: true,minify: {// 压缩产出后的html页面removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPlugin// 分类要插到html页面的模块chunksSortMode: 'dependency'}),// split vendor js into its own file// 下面的插件是将打包后的文件中的第三方库文件抽取出来，便于浏览器缓存，提高程序的运行速度.new webpack.optimize.CommonsChunkPlugin({// common 模块的名称name: 'vendor',minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendor// 将所有依赖于node_modules下面文件打包到vendor中return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// extract webpack runtime and module manifest to its own file in order to// prevent vendor hash from being updated whenever app bundle is updated// 把webpack的runtime代码和module manifest代码提取到manifest文件中，防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']}),// copy custom static assets// 下面是复制文件的插件，我认为在这里并不是起到复制文件的作用，而是过滤掉打包过程中产生的以.开头的文件new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
})if (config.build.productionGzip) {// 开启Gzi压缩打包后的文件，把这个压缩包给浏览器，浏览器自动解压.// 你要知道，vue-cli默认将这个神奇的功能禁用掉的，理由是Surge 和 Netlify 静态主机默认帮你把上传的文件gzip了.var CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp( // 这里是把js和css文件压缩'\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}if (config.build.bundleAnalyzerReport) {// 打包编译后的文件打印出详细的文件信息，vue-cli默认把这个禁用了，个人觉得还是有点用的，可以自行配置var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}module.exports = webpackConfig

二、optimize-css-assets-webpack-plugin 插件

强烈建议在生产环境中使用extract-text-webpack-plugin。

使用方法如下：

安装
npm install --save-dev optimize-css-assets-webpack-plugin

还要安装 cssnano ，这是一个css编译器 npm install --save-dev cssnano 。

new OptimizeCssAssetsPlugin({assetNameRegExp: /\.optimize\.css$/g, // 不写默认是/\.css$/gcssProcessor: require('cssnano'), // 编译器选项，不写默认是cssnano，所以使用这个插件不管怎样都要cssnanocssProcessorOptions: { discardComments: {removeAll: true } }, // 传递给编译器的参数canPrint: true // 是否能够输出信息
})

三、拓展阅读

《Vue进阶（五十一）： vue-cli脚手架build目录中的webpack.base.conf.js配置文件》
《Vue进阶（五十二）：vue-cli脚手架build目录中的webpack.dev.conf.js配置文件》
《Vue进阶（五十三）：vue-cli脚手架build目录中的webpack.prod.conf.js配置文件》
《Vue进阶（五十四）：vue-cli脚手架build目录中的dev-server.js配置文件》
《Vue进阶（五十五）：vue-cli脚手架build目录中的build.js配置文件》
《Vue进阶（五十六）：vue-cli脚手架build目录中的karma.conf.js配置文件》

Vue进阶（五十三）：vue-cli 脚手架 webpack.prod.conf.js 配置文件详解相关推荐

vue-cli中webpack配置之webpack.prod.conf.js
配置内容 var path = require('path') var utils = require('./utils') var webpack = require('webpack') var ...
Ruoyi框架学习--Vue前端配置文件详解
CSDN话题挑战赛第2期参赛话题:学习笔记 1.package.json配置中的重点介绍: 1.许可证:license:各种License介绍(BSD,MIT,MPL,Apache License, ...
Vue中ESlint配置文件eslintrc.js文件详解
最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认 ...
vue:hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
运行vue项目是报错: hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.con ...
vue init webpack vue-demo01复杂安装的详解
终端cmd,在项目中输入下面命令: E:\Vue>vue init webpack vuedemo02 接着就会让你输入或者选择一些是不是要的东西 ? Project name vuedemo0 ...
Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
vue项目运行不成功--@1.0.0 dev: **`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
项目场景: vue 新项目运行–安装依赖包–运行项目问题描述: 安装依赖包不成功-运行不起来 //mobileap----mobileap是项目名称,package.josn里name(文件夹名称) ...
vue - webpack.dev.conf.js
描述:开发时的配置.(配置开发时的一些操作) 例如这里,是否自动打开浏览器(默认true) 1 'use strict' 2 3 // build/util.js 4 const utils = re ...
vue ajax拦截器,Vue-resource拦截器判断token失效跳转详解
本文主要为大家带来一篇Vue-resource拦截器判断token失效跳转的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 在拦截器中设置全局的 ...