移動App第2天
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文件的插件
相關文章
內容來自網上，記錄學習筆記方便後期查看，如有問題請與我聯繫，謝謝