webpack.prod.conf.js
</>復(fù)制代碼
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")
// 獲取當(dāng)前環(huán)境
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
// 將.vue外部的css或css預(yù)處理器文件進(jìn)行處理
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// 是否開啟調(diào)試
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: [
// 定義一個在編譯時間內(nèi)可以使用的全局變量,用來關(guān)閉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文件。因此,樣式不再內(nèi)聯(lián)到j(luò)avascript里面,但會放到一個多帶帶的css包文件 (styles.css)當(dāng)中。 如果樣式文件較大,這會更快,因為樣式文件會跟javascript包并行加載
new ExtractTextPlugin({
filename: utils.assetsPath("css/[name].[contenthash].css")
}),
// 壓縮提取出來的CSS,并且進(jìn)行css的復(fù)用以解決extract-text-webpack-plugin將css處理后會出現(xiàn)的css重復(fù)的情況
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 構(gòu)建要編譯輸出的index.html,并在文件中嵌入資源文件
new HtmlWebpackPlugin({
// 輸出的HTML文件名
filename: config.build.index,
// 模板文件路徑
template: "index.html",
// 設(shè)置為true或body可以將js代碼放到元素最后
// 設(shè)置為head將js代碼加到里面
// 設(shè)置為false所有靜態(tài)資源css和JavaScript都不會注入到模板文件中
inject: true,
minify: {
// 刪除注釋
removeComments: true,
// 合并空白
collapseWhitespace: true,
// 刪除屬性的引號
removeAttributeQuotes: true
},
// 通過CommonsChunkPlugin控制chunks在html文件中添加的順序
// 設(shè)置為dependency即按照它們之間的依賴關(guān)系添加
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可以保證如果我們的第三方插件沒有變動,在打包的時候可以不被重新的打包
// 待到上線后就不會重新的加載以達(dá)到緩存的目的
// 我們會獲得webpack執(zhí)行時間和輸出一份json文件保存chunk的id和最終引用它們的文件印射關(guān)系
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
chunks: ["vendor"]
}),
// 復(fù)制static文件夾內(nèi)的靜態(tài)資源到打包好的文件中
// 具體的路徑是之前我們設(shè)置的"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
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/109677.html
摘要:一介紹是官方提供的腳手架,用來快速建立項目。標(biāo)識項目名稱,這個你可以根據(jù)自己的項目來起名字。初始化完成之后,進(jìn)入安裝目錄,必須先安裝項目依賴,否則無法運行。源文件需要注意的是是入口文件,下的是路由文件,文件是組件文件。 一.介紹 vue-cli是官方提供的腳手架,用來快速建立項目。 二.安裝 npm install vue-cli -g//全局安裝 三.初始化項目 vue init ...
摘要:根據(jù)模板插入等生成最終生成的存放路徑,相對于的路徑模板路徑插入的位置,路徑設(shè)置屬性,屬性值是所在的路徑。配置后,在使用時將不再需要和進(jìn)行引入,直接使用即可。 一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片 處理ie兼容 1.2 我們大部分為單頁面應(yīng)用(SPA),配置多頁面也可以在此配置 2. resol...
摘要:文章來源命令行工具分析命令行工具分析提供一個官方命令行工具,可用于快速搭建大型單頁應(yīng)用。其他模式的配置文件以此為基礎(chǔ)通過合并。 文章來源:Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一個官方命令行工具,可用于快速搭建大型單頁應(yīng)用。vue-webpack-boilerplate,官方定義為: full-featured Webpack setup ...
摘要:轉(zhuǎn)載文章公司的平臺功能越堆越多,打包也越來越費勁,一次十幾分鐘,運維很不爽,搗鼓了一下預(yù)編譯,試了一下大概縮短了七八分鐘,目前感覺還行,現(xiàn)在把它記下來,給需要的童鞋當(dāng)做參考,也給自己記錄一下。 (轉(zhuǎn)載文章)公司的平臺功能越堆越多,打包也越來越費勁,一次十幾分鐘,運維很不爽,so搗鼓了一下預(yù)編譯,試了一下大概縮短了七八分鐘,目前感覺還行,現(xiàn)在把它記下來,給需要的童鞋當(dāng)做參考,也給自己記錄...
閱讀 4241·2021-09-26 10:17
閱讀 884·2021-09-22 15:02
閱讀 3471·2021-09-06 15:00
閱讀 1065·2021-07-25 16:52
閱讀 2748·2019-08-29 16:16
閱讀 2523·2019-08-29 13:25
閱讀 1599·2019-08-26 13:51
閱讀 2194·2019-08-26 10:58