webpack-高級-發佈策略

webpack的發佈策略

1. 在實際開發中，通常會有兩套項目方案：

• 一套是開發期間的項目，包含了測試文件、測試數據、開發工具、測試工具等相關配置，有利於項目的開發和測試，可是這些文件僅用於開發，發佈項目時候須要剔除；
• 另外一套是部署期間的項目，剔除了那些客戶用不到的測試數據測試工具和文件，比較純淨，減小了項目發佈後的體積，有利於安裝和部署！

1. 爲了知足咱們的發佈策略，須要新建一個配置文件，命名爲webpack.publish.config.js，將webpack.config.js的配置拷貝過去，剔除一些開發配置項便可：

• 將devServer節點刪掉：

devServer: {
       hot: true,
       open: true,
       port: 4321
   }

• 將plugins節點下的熱更新插件刪掉：

new webpack.HotModuleReplacementPlugin()

1. 修改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]' }

1. 在package.json中的script節點下新增dev命令，經過--config指定webpack啓動時要讀取的配置文件：

"pub": "webpack --config webpack.publish.config.js"

每次從新構建時候刪除dist目錄

1. 運行cnpm i clean-webpack-plugin --save-dev
2. 在頭部引入這個插件：

var cleanWebpackPlugin = require('clean-webpack-plugin');

1. 在plugins節點下使用這個插件：

new cleanWebpackPlugin(['dist'])

分離第三方包改造webpack.publish.config.js

1. 改造entry節點以下：

entry: {
        app: path.resolve(__dirname, 'src/js/main.js'), // 本身代碼的入口
        vendors: ['jquery'] // 要分離的第三方包的入口
    }

1. 在plugins節點下新增插件：

new webpack.optimize.CommonsChunkPlugin({ // 抽離第三方包的插件
        name:'vendors', // 指定抽離第三方包的入口名稱
        filename:'vendors.js' // 抽離出的公共模塊的名稱
})

1. 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文件

1. 運行npm install --save-dev extract-text-webpack-plugin安裝抽取CSS文件的插件。
2. 在配置文件中導入插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

1. 修改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: '../' // 設置圖片路徑
    })
}

1. 在plugins節點下新增插件：

new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件

壓縮抽取出來的CSS文件

1. 運行cnpm i optimize-css-assets-webpack-plugin --save-dev安裝插件到開發依賴。
2. 在配置文件頭部導入插件：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

1. 在plugins節點下新增插件：

new OptimizeCssAssetsPlugin() // 壓縮CSS文件的插件

相關文章

1. Sass 基礎教程
2. webpack-dev-server