場(chǎng)景：
vue項(xiàng)目（單頁(yè)面應(yīng)用）已完成像啼；
用webpack打包vue項(xiàng)目準(zhǔn)備上線模孩；
在項(xiàng)目根目錄（手寫(xiě)）創(chuàng)建打包配置文件webpack.config.prod.js,框架及內(nèi)容如下杖玲。
//引包：打包成頁(yè)面用到的webpack+html
const webpack = require("webpack");
//htmlWebpackPlugin它的作用是根據(jù)chunk代碼塊生成文檔
const htmlWebpackPlugin = require("html-webpack-plugin");
//引包：output需要用到字符串拼接
const path = require("path");
//引包：刪除（舊的打包文件）dist目錄
var cleanWebpackPlugin = require("clean-webpack-plugin");
//引包：抽離css的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry:{ //（按實(shí)際寫(xiě)）這里放分解抽包后的入口文件-分解后的main.js
// 在這里分了多少個(gè)口胧华，main.js及其引包的js庫(kù)與插件就會(huì)被分解抽包成多少個(gè)
// 最后的 bundle:"./src/main.js"為拆解了各包后剩下的部分
// 【格式】最終js文件名: ['vue包名1', "vue包名2"]
},
output:{ //（固定寫(xiě)法）為分解抽包的js文件指定路徑
path: path.resolve(__dirname, 'dist'), //需拼接路徑所以前面得引包path
filename: 'js/[name].js'
},
module:{ //（按實(shí)際寫(xiě)）加載器：文件loader温数，處理不同的靜態(tài)資源
// 【格式】{ test:/\.后綴名$/, use:['xx-loader'] },
// 【格式】{ test:/\.(后綴|后綴)$/, use:[ { loader:'xx-loader', opinions:{ }] },
// 【格式】{ test:/\.(后綴|后綴)$/, use:插件.調(diào)用({ fallback:"xx-loader", use:[{ loader:'xx-loader', opinions:{ }}] }),
},
resolve:{ //（固定寫(xiě)法）可以不加后綴, 直接使用 import xx from 'xx' 的語(yǔ)法
extensions: ['.vue', '.js', '.css']
},
plugins:[ //（按實(shí)際寫(xiě)）生成html前，打包專(zhuān)用組件的各種優(yōu)化操作驾荣，如刪舊dist外构、壓縮、抽出包等
// （固定寫(xiě)法）刪除舊的dist打包文件夾
new CleanWebpackPlugin('dist'),
//其實(shí)要?jiǎng)h除文件的路徑可以是多個(gè)播掷，視具體情況而定
//（固定寫(xiě)法） 配置html
new htmlWebpackPlugin({
template: './template.html', //從這兒出發(fā)
filename: 'index.html', //導(dǎo)成這個(gè)
minify:{ //（固定寫(xiě)法）html的壓縮配置
removeComments: true,//移除注釋
minifyJS: true,//壓縮js
minifyCSS: true,//壓縮css
collapseWhitespace: true,//去除空格
// collapseWhitespace: true, //(段子黃未用)移除空白
// removeAttributeQuotes: true //(段子黃未用)移除屬性中的雙引號(hào)
}
}),
new webpack.ProvidePlugin({//（固定寫(xiě)法）全局導(dǎo)入jquery,將jquery掛載到windows上
// 用于有些庫(kù)审编，比如jquery、bootstrap歧匈，打包不會(huì)出錯(cuò)垒酬，但是放在瀏覽器下就出問(wèn)題，原因是bootstrap在初始化的時(shí)候要傳入全局的jQuery變量件炉，webpack中各模塊都是獨(dú)立的勘究，jquery也是，jQuery無(wú)法賦值到window上斟冕，導(dǎo)致報(bào)錯(cuò)口糕，這時(shí)候，這個(gè)插件就派上用場(chǎng)了磕蛇，將jquery模塊輸出到全局的jQuery變量上景描。讓bootstrap不再報(bào)錯(cuò)（沒(méi)用bootstrap用了jQuery的話也要全局導(dǎo)入jQuery）
$: "jquery",
jQuery: "jquery"
}),
//（固定寫(xiě)法）設(shè)置當(dāng)前環(huán)境為生產(chǎn)環(huán)境
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//（固定寫(xiě)法）使用UglifyJs對(duì)js代碼進(jìn)行壓縮
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false, //去掉警告
drop_debugger: true, //去掉調(diào)試器和調(diào)試語(yǔ)句
drop_console: true //去除console.log
},
comments: false //去掉版權(quán)信息等注釋約1k，也可以保留
}),
//（按實(shí)際寫(xiě)）抽離第三方包秀撇，這里不要寫(xiě)bundle.js
new webpack.optimize.CommonsChunkPlugin({
//（按實(shí)際寫(xiě)）抽離的第三方包
name: ["quanjiatong", "vue-lazyload", "v-distpicker", "vue-moment", "jquery", "axios"],
// 對(duì)應(yīng) entry 中拆解打包后的js文件名超棺，除了bundle以外按順序倒著寫(xiě)
// filename: "vendor.js" //這是干嘛的？樂(lè)東看到了請(qǐng)告訴我
// (給 chunk 一個(gè)不同的名字)
// （固定寫(xiě)法）(隨著 entry chunk 越來(lái)越多呵燕，這個(gè)配置保證沒(méi)其它的模塊會(huì)打包進(jìn) vendor chunk)
minChunks: Infinity,
}),
// （固定寫(xiě)法）通過(guò)插件抽離 css
new ExtractTextPlugin("css/styles.css")
//參數(shù)：傳入路徑棠绘，表示將抽離的css文件生成到哪個(gè)目錄中
]
}
后續(xù)更新...
還缺少npm三個(gè)包的安裝、.Babel文件es6轉(zhuǎn)es5的配置再扭、打包完成后的（字體圖標(biāo)等的）路徑校準(zhǔn)等.
- package.json的scripts中增配置
"build":"webpack --progress --config webpack.config.prod.js"
- 打包命令行
npm run build
2018.3.26
