webpack發布策略

在開發階段, 一般會有兩套方案:

為了滿足我們的發布策略, 需要新建乙個配置檔案, 命名為webpack.publish.config.js將webpack.config.js的配置拷貝過去, 剔除一些開發配置即可 ;

devserver

將plugins節點下的熱更新外掛程式刪除 ;

new webpack.hotmodulereplacementplugin()

修改url-loader, 將放入統一的 images 資料夾下 ;

或者使用img-字首加上 7位的hash名稱 ;

每次打包自動生成 dist 目錄刪除老的 dist 目錄

npm install clean-webpack-plugin -d

const cleanwebpackplugin = require('clean-webpack-plugin');
plugins: [
// 需要刪除的目錄
new cleanwebpackplugin(['dist'])
]

抽離第三方包

思路: bundle.js 只存放自己的** 第三方包的**全部抽離到乙個另外的 js 中

const webpack = require('webpack');
const path = require('path');
module.exports = ,
output: ,
plugins: [
// 例項化建構函式
new webpack.optimize.commonschunkplugin()
]};

壓縮 js **

const webpack = require('webpack');
plugins: [
new webpack.optimize.uglifyjsplugin(
}),new webpack.optimize.dedupplugin()
]

壓縮 html **

const htmlwebpackplugin = require('html-webpack-plugin');
const path = require('path');
plugins: [
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
minify: 
]

抽離資料夾

npm install extract-text-webpack-plugin -d

cont extracttextplugin = require('extract-text-webpack-plugin');
module.exports = )}},
plugins: [
// 抽取 css 檔案並且命名為 style.css
// 如果前面加了目錄就代表是打包到某個資料夾 '/css/style.css'
new extracttextplugin('style.css')
]}

壓縮 css 檔案

npm install optimize-css-assets-webpack-plugin -d

var optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');
plugins: [
// 壓縮 css 檔案
new optimizecssassetsplugin()
]

webpack 發布配置

上次寫的是開發配置，這次是發布配置解析引用了單獨打包模組在loaders內配置的css less scss都用到了，這樣它們都解析完後會合併到指定的css檔案內。還有的配置，name images hash 8 name ext 設定了name引數。表示的儲存地在plugins內有二個配置，...

整理灰度發布策略

目錄灰度發布是版本公升級平滑過渡的一種方式也可以增加產品的某些特性簡而言之，當版本公升級時，使部分使用者使用高版本，其他使用者繼續使用低版本，待高版本穩定後，逐步擴大範圍把所有使用者流量都遷移到高版本上面來。ab test也是一種灰度發布方式，讓一部分使用者繼續用a，一部分使用者開始用b，如果使...

前端開發 webpack 發布環境配置

記錄一下前端開發中webpack的傳統發布環境配置 const require path const minics tractplugin require mini css extract plugin const optimizecssassetswebpackplugin require opt...

webpack發布策略

webpack 發布配置

整理 灰度發布策略

前端開發 webpack 發布環境配置

相關推薦

整理灰度發布策略