配置内容

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// 获取当前环境
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {module: {// 将.vue外部的css或css预处理器文件进行处理rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true})},// 是否开启调试devtool: config.build.productionSourceMap ? '#source-map' : false,output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),// 定义在非入口文件引用的文件的名称chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [// 定义一个在编译时间内可以使用的全局变量，用来关闭vue的所有警告功能new webpack.DefinePlugin({'process.env': env}),// 最小化所有JavaScript输出块，消除无作用的代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},sourceMap: false}),// ExtractTextPlugin会将所有的「入口 chunk(entry chunks)」中的 require("style.css") 移动到独立分离的css文件。因此，样式不再内联到javascript里面，但会放到一个单独的css包文件 (styles.css)当中。 如果样式文件较大，这会更快，因为样式文件会跟javascript包并行加载new ExtractTextPlugin({filename: utils.assetsPath('css/[name].[contenthash].css')}),// 压缩提取出来的CSS，并且进行css的复用以解决extract-text-webpack-plugin将css处理后会出现的css重复的情况new OptimizeCSSPlugin({cssProcessorOptions: {safe: true}}),// 构建要编译输出的index.html,并在文件中嵌入资源文件new HtmlWebpackPlugin({// 输出的HTML文件名filename: config.build.index,// 模板文件路径template: 'index.html',// 设置为true或body可以将js代码放到&lt;body&gt;元素最后// 设置为head将js代码加到&lt;head&gt;里面// 设置为false所有静态资源css和JavaScript都不会注入到模板文件中inject: true,minify: {// 删除注释removeComments: true,// 合并空白collapseWhitespace: true,// 删除属性的引号removeAttributeQuotes: true},// 通过CommonsChunkPlugin控制chunks在html文件中添加的顺序  // 设置为dependency即按照它们之间的依赖关系添加chunksSortMode: 'dependency'}),// webpack将公共模块打包的vendor.js里面使用CommonsChunkPlugin将vendor.js分离到单独的文件new webpack.optimize.CommonsChunkPlugin({// 公共模块名字name: 'vendor',minChunks: function(module, count) {return (module.resource &amp;&amp;/\.js$/.test(module.resource) &amp;&amp;module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// 使用CommonsChunkPlugin可以保证如果我们的第三方插件没有变动，在打包的时候可以不被重新的打包// 待到上线后就不会重新的加载以达到缓存的目的// 我们会获得webpack执行时间和输出一份json文件保存chunk的id和最终引用它们的文件印射关系new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']}),// 复制static文件夹内的静态资源到打包好的文件中// 具体的路径是之前我们设置的"config.build.assetsSubDirectory"new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
})
// 如果开启了Gzip压缩，使用以下配置
if (config.build.productionGzip) {var 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}))
}
// 如果开启了编译报告，使用以下配置
if (config.build.bundleAnalyzerReport) {var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

原文链接：https://www.jianshu.com/p/2cbb7ea48683

vue-cli中webpack配置之webpack.prod.conf.js相关推荐

Vue进阶（五十三）：vue-cli 脚手架 webpack.prod.conf.js 配置文件详解
文章目录一.前言二.optimize-css-assets-webpack-plugin 插件三.拓展阅读一.前言 webpack.prod.conf.js 配置文件是webpack生产环境核 ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发.多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们.这通常被称作微前端,但并不仅限于此. 我们分为本地模块 ...
Vue Cli 中使用 jQuery
Vue Cli 中使用 jQuery 方式一: 1.安装 jquery npm install jquery 2.在想要使用 jQuery 的文件里面引入即可: import $ from 'jque ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
Web前端笔记-js中加载图片文件（vue cli中同样适用）
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...

vue-cli中webpack配置之webpack.prod.conf.js

配置内容

vue-cli中webpack配置之webpack.prod.conf.js相关推荐

最新文章

热门文章