webpack的發布策略
- 在實際開發中，一般會有兩套專案方案：
- 一套是開發期間的專案，包含了測驗檔案、測驗資料、開發工具、測驗工具等相關配置，有利于專案的開發和測驗，但是這些檔案僅用于開發，發布專案時候需要剔除；
- 另一套是部署期間的專案，剔除了那些客戶用不到的測驗資料測驗工具和檔案，比較純凈，減少了專案發布后的體積，有利于安裝和部署！
- 為了滿足我們的發布策略，需要新建一個組態檔，命名為
webpack.publish.config.js，將webpack.config.js的配置拷貝過去，剔除一些開發配置項即可：
- 將
devServer節點刪掉：
devServer: {
hot: true,
open: true,
port: 4321
}
- 將
plugins節點下的熱更新插件刪掉：
new webpack.HotModuleReplacementPlugin()
- 修改
url-loader，將圖片放入統一的images檔案夾之下：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/[name].[ext]' }
或者使用img-前綴加上7位的hash名稱：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/img-[hash:7].[ext]' }
- 在
package.json中的script節點下新增dev命令，通過--config指定webpack啟動時要讀取的組態檔：
"pub": "webpack --config webpack.publish.config.js"
每次重新構建時候洗掉dist目錄
- 運行
cnpm i clean-webpack-plugin --save-dev - 在頭部引入這個插件：
var cleanWebpackPlugin = require('clean-webpack-plugin');
- 在
plugins節點下使用這個插件：
new cleanWebpackPlugin(['dist'])
分離第三方包改造webpack.publish.config.js
- 改造entry節點如下：
entry: {
app: path.resolve(__dirname, 'src/js/main.js'), // 自己代碼的入口
vendors: ['jquery'] // 要分離的第三方包的入口
}
- 在plugins節點下新增插件：
new webpack.optimize.CommonsChunkPlugin({ // 抽離第三方包的插件
name:'vendors', // 指定抽離第三方包的入口名稱
filename:'vendors.js' // 抽離出的公共模塊的名稱
})
html-webpack-plugin在生成index.html檔案的時候，會自動將抽離的第三方包引入進去！
優化壓縮JS
在plugins陣列中添加：
new webpack.optimize.UglifyJsPlugin({ // 優化壓縮JS
compress:{
warnings:false // 移除警告
}
}),
new webpack.DefinePlugin({ // 設定為產品上線環境，進一步壓縮JS代碼
'process.env.NODE_ENV': '"production"'
})
優化壓縮HTML檔案
在plugins節點下的htmlWebpackPlugin插件中，添加minify子節點：
minify:{// 壓縮HTML代碼
collapseWhitespace:true, // 合并空白字符
removeComments:true, // 移除注釋
removeAttributeQuotes:true // 移除屬性上的引號
}
其他優化項請參考：html-minifier - github
抽取CSS檔案
- 運行
npm install --save-dev extract-text-webpack-plugin安裝抽取CSS檔案的插件， - 在組態檔中匯入插件：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
- 修改CSS和Sass的loader如下：
{
test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"],
publicPath: '../' // 設定圖片路徑
})
},
{
test: /\.scss$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader'],
publicPath: '../' // 設定圖片路徑
})
}
- 在plugins節點下新增插件：
new ExtractTextPlugin("css/styles.css"), // 抽取CSS檔案的插件
壓縮抽取出來的CSS檔案
- 運行
cnpm i optimize-css-assets-webpack-plugin --save-dev安裝插件到開發依賴， - 在組態檔頭部匯入插件：
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
- 在plugins節點下新增插件：
new OptimizeCssAssetsPlugin() // 壓縮CSS檔案的插件
相關文章
- Sass 基礎教程
- webpack-dev-server
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/93530.html
標籤：其他