2017年4月份的時候,Facebook將React的構建工具換成了Rollup。很多人就有疑問了,Webpack不也是Facebook團隊開發的嗎,爲什麼不使用它而是要換成第三方構建工具呢?先別急,等你看完這篇文章,你就知道爲什麼了。
一、Webpack
誕生於2012年,目前Javascript社區使用得比較多的構建工具。它的出現,解決了當時的構建工具不能處理的問題——構建複雜的單頁面應用(SPA)。它是一個強力的模塊打包器。 所謂包(bundle)就是一個 JavaScript 文件,它把一堆資源(assets)合併在一起,以便它們可以在同一個文件請求中發回給客戶端。 包中可以包含 JavaScript、CSS 樣式、HTML 以及很多其它類型的文件。
Webpack的特點
代碼分割
Webpack 有兩種組織模塊依賴的方式,同步和異步。異步依賴作爲分割點,形成一個新的塊。在優化了依賴樹後,每一個異步區塊都作爲一個文件被打包。
Loader(加載器)
Webpack 本身只能處理原生的 JavaScript 模塊,但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣,任何資源都可以成爲 Webpack 可以處理的模塊。
智能解析
Webpack 有一個智能解析器,幾乎可以處理任何第三方庫,無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候,允許使用動態表達式 require("./templates/" + name + ".jade")。
插件系統
Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的,還可以開發和使用開源的 Webpack 插件,來滿足各式各樣的需求。
開始使用
安裝
目前webpack最新版本是3.0.0
npm i webpack -g br/>npm i webpack@version -g
配置
在項目添加webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js'
}, module: { rules: [
{ test: /.vue$/, loader: 'vue-loader', options: { loaders: {} // other vue-loader options go here
}
},
{ test: /.js$/, loader: 'babel-loader', exclude: /node_modules/
},
{ test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]'
}
}
]
}, resolve: { alias: { 'vue$': 'vue/dist/vue.common.js'
}
}, devServer: { historyApiFallback: true, noInfo: true
}, performance: { hints: false
}, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"'
}
}), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false
}
}), new webpack.LoaderOptionsPlugin({ minimize: true
})
]);
}
打開命令控制檯,執行:
webpack# or webpack --config webpack.config.js
此時你應該可以在項目目錄的dist文件夾裏找到打包好的文件了。
其他使用方式可參照官方文檔:
英文:https://webpack.js.org/configuration/
中文:https://doc.webpack-china.org/configuration/
二、Rollup
Rollup是下一代JavaScript模塊打包工具。開發者可以在你的應用或庫中使用ES2015模塊,然後高效地將它們打包成一個單一文件用於瀏覽器和Node.js使用。 Rollup最令人激動的地方,就是能讓打包文件體積很小。這麼說很難理解,更詳細的解釋:相比其他JavaScript打包工具,Rollup總能打出更小,更快的包。因爲Rollup基於ES2015模塊,比Webpack和Browserify使用的CommonJS模塊機制更高效。這也讓Rollup從模塊中刪除無用的代碼,即tree-shaking變得更容易。
Rollup的特點
Tree-shaking
這個特點,是Rollup最初推出時的一大特點。Rollup通過對代碼的靜態分析,分析出冗餘代碼,在最終的打包文件中將這些冗餘代碼刪除掉,進一步縮小代碼體積。這是目前大部分構建工具所不具備的特點(Webpack 2.0+已經支持了,但是我本人覺得沒有Rollup做得乾淨)。
ES2015模塊打包支持
這個也是其他構建工具所不具備的。Rollup直接不需要通過babel將import轉化成Commonjs的require方式,極大地利用ES2015模塊的優勢。
使用
先在全局安裝好rollup
npm i rollup -g
然後我們再創建一個簡單的項目:
mkdir -p my-rollup-project/src
cd my-rollup-project
編寫好入口文件:
// src/main.jsimport foo from './foo.js';export default function () {
console.log(foo);
}
然後,創建一個名爲foo.js的文件
// src/foo.jsexport default 'hello world!';
最後,打開命令行,執行下面的命令吧:
rollup src/main.js --format cjs
打包結果:
'use strict';var foo = 'hello world!';var main = function () { console.log(foo);
};module.exports = main;
你也可以打包出一個名爲bundle.js的文件:
rollup src/main.js --format cjs --output bundle.js# or rollup main.js -f cjs -o bundle.js
其他使用方式可查看官網文檔:
https://rollupjs.org
三、Webpack與Rollup的對比
其實,通過分別對Webpack和Rollup的介紹,不難看出,Webpack和Rollup在不同場景下,都能發揮自身優勢作用。Webpack對於代碼分割和靜態資源導入有着“先天優勢”,並且支持熱模塊替換(HMR),而Rollup並不支持,所以當項目需要用到以上,則可以考慮選擇Webpack。但是,Rollup對於代碼的Tree-shaking和ES6模塊有着算法優勢上的支持,若你項目只需要打包出一個簡單的bundle包,並是基於ES6模塊開發的,可以考慮使用Rollup。
其實Webpack從2.0開始支持Tree-shaking,並在使用babel-loader的情況下支持了es6 module的打包了,實際上,Rollup已經在漸漸地失去了當初的優勢了。但是它並沒有被拋棄,反而因其簡單的API、使用方式被許多庫開發者青睞,如React、Vue等,都是使用Rollup作爲構建工具的。而Webpack目前在中大型項目中使用得非常廣泛。
最後,用一句話概括就是:在開發應用時使用 Webpack,開發庫時使用 Rollup。
四、總結
Webpack和Rollup作爲構建工具,都有着各自的優勢和各自的使用場景,我們不能因爲他們的一些缺點而棄之,相反,我們在開發過程中,若是能利用好它們的優點,並能對我們的生產效率有着極大的提高作用。
作者:網易雲
來源:CSDN
原文:https://blog.csdn.net/wangyiyungw/article/details/84955909
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!