底層：vue-cli腳手架build目錄中的webpack.prod.conf.js配置檔案
首先宣告：這篇文章摘錄自別人的文件，直接複製過來的，方便於以後自己檢視，如有侵權，請諒解
// 下面是引入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等檔案分離到指定.css檔案
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// optimize-css-assets-webpack-plugin外掛的作用是壓縮css程式碼的，
//還能去掉extract-text-webpack-plugin外掛抽離檔案產生的重複程式碼，
//因為同一個css可能在多個模組中出現所以會導致重複程式碼，換句話說這兩個外掛是兩兄弟 // 詳情見(1)
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var ZipPlugin = require('zip-webpack-plugin')
//var env ={NODE_ENV: '"production"'}
var env = config.build.env
// 把當前的配置物件和基礎的配置物件合併
var webpackConfig = merge(baseWebpackConfig, {
module: {
// 下面就是把utils配置好的處理各種css型別的配置拿過來
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// devtool開發工具，用來生成個sourcemap方便除錯,,,沒仔細看
devtool: '#source-map',
output: {
// 打包後的檔案放在dist目錄裡面
path: config.build.assetsRoot,
// 檔名稱使用 static/js/[name].[chunkhash].js, 其中name就是index,chunkhash就是模組的hash值，用於瀏覽器快取的
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// chunkFilename是非入口模組檔案，也就是說filename檔案中引用了chunckFilename
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
//publicPath: "https://cdn.chinaclear.cn/siteResource/pop-online-fund-vote-web/"
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
// 下面是利用DefinePlugin外掛，定義process.env環境變數為env
new webpack.DefinePlugin({
'process.env': env
}),
// UglifyJsPlugin外掛是專門用來壓縮js檔案的
new webpack.optimize.UglifyJsPlugin({
compress: {
//刪除無用程式碼時不輸出警告
warnings: false, // 禁止壓縮時候的警告資訊，給使用者一種vue高大上沒有錯誤的感覺
//刪除console語句
drop_console: true
},
//刪除註釋
comments: false,
mangle: false,
// 壓縮後生成map檔案
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
// 生成獨立的css檔案，下面是生成獨立css檔案的名稱
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true
}),
// 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.html
filename: config.build.index,
// 模板是index.html加不加無所謂
template: 'index.html',
favicon: './src/assets/images/favicon.ico',
excludeChunks: ['admin'],
chunks: ['manifest','vue','ele','vendor','index'],
// 將js檔案放到body標籤的結尾
inject: true,
minify: {
// 壓縮產出後的html頁面
removeComments: false,
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: 'manual'//'dependency'
}),
new HtmlWebpackPlugin({
filename: config.build.adminIndex,
template: 'admin.html',
favicon: './static/img/favicon.ico',//'./src/assets/images/favicon.ico',
excludeChunks: ['index'],
chunks: ['manifest','vue','ele','vendor','admin'],
inject: true,
minify: {
removeComments: false,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'manual' //'dependency'
}),
new webpack.HashedModuleIdsPlugin(),
// split vendor js into its own file
// 下面的外掛是將打包後的檔案中的第三方庫檔案抽取出來，便於瀏覽器快取，提高程式的執行速度
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['index', 'admin'],
// 將所有依賴於node_modules下面檔案打包到vendor中
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0 &&
module.resource.indexOf(
path.join(__dirname, '../node_modules/element-ui')
) !== 0 &&
module.resource.indexOf(
path.join(__dirname, '../node_modules/vue')
) !== 0
)
}
}),
//分離element-ui
new webpack.optimize.CommonsChunkPlugin({
name: 'ele',
filename: 'static/js/[name].[chunkhash].js',
chunks: ['admin','index'] ,
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules/element-ui')
) === 0
)
}
}),
//分離vue元件
new webpack.optimize.CommonsChunkPlugin({
name: 'vue',
filename: 'static/js/[name].[chunkhash].js',
chunks: ['index','admin'],
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules/vue')
) === 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: ['.*']
}
]),
new ZipPlugin({
path: path.join(__dirname,'../dist'),
filename: 'dist.zip'
})
]
})
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(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
// 打包編譯後的檔案打印出詳細的檔案資訊，vue-cli預設把這個禁用了，個人覺得還是有點用的，可以自行配置
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
打個廣告：淘寶天貓內部優惠群，加我微信拉你進群18801014156