vue-cli中webpack配置之webpack.prod.conf.js
本文中內容僅限於使用vue-cli的2.8.x版本生成的webpack項目
在這個文件中，主要做了以下幾項配置
- 合併基礎的webpack配置
- 使用styleLoaders
- 配置webpack的輸出
- 配置webpack插件
- gzip模式下的webpack插件配置
- webpack-bundle分析
配置內容
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代碼放到<body>元素最後
// 設置爲head將js代碼加到<head>裏面
// 設置爲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 &&
/\.js$/.test(module.resource) &&
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').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
該系列全部文章
- vue-cli中webpack配置之build.js
- vue-cli中webpack配置讀之check-versions.js
- vue-cli中webpack配置之dev-client.js
- vue-cli中webpack配置之dev-server.js
- vue-cli中webpack配置之utils.js
- vue-cli中webpack配置之vue-loader-conf.js
- vue-cli中webpack配置之webpack.base.conf.js
- vue-cli中webpack配置之webpack.dev.conf.js
- vue-cli中webpack配置之webpack.prod.conf.js