WebPack 簡明學習教程
WebPack是什麼
- 一個打包工具
- 一個模塊加載工具
- 各種資源都可以當成模塊來處理
- 網站 http://webpack.github.io/
如今,越來越多的JavaScript代碼被使用在頁面上,我們添加很多的內容在瀏覽器裏。如何去很好的組織這些代碼,成爲了一個必須要解決的難題。
對於模塊的組織,通常有如下幾種方法:
- 通過書寫在不同文件中,使用script標籤進行加載
- CommonJS進行加載(NodeJS就使用這種方式)
- AMD進行加載(require.js使用這種方式)
- ES6模塊
思考:爲什麼只有JS需要被模塊化管理,前臺的很多預編譯內容,不需要管理嗎?
基於以上的思考,WebPack項目有如下幾個目標:
- 將依賴樹拆分,保證按需加載
- 保證初始加載的速度
- 所有靜態資源可以被模塊化
- 可以整合第三方的庫和模塊
- 可以構造大系統
從下圖可以比較清晰的看出WebPack的功能
WebPack的特點
- 豐富的插件,方便進行開發工作
- 大量的加載器,包括加載各種靜態資源
- 代碼分割,提供按需加載的能力
- 發佈工具
WebPack的優勢
- webpack 是以 commonJS 的形式來書寫腳本滴,但對 AMD/CMD 的支持也很全面,方便舊項目進行代碼遷移。
- 能被模塊化的不僅僅是 JS 了。
- 開發便捷,能替代部分 grunt/gulp 的工作,比如打包、壓縮混淆、圖片轉base64等。
- 擴展性強,插件機制完善,特別是支持 React 熱插拔(見 react-hot-loader )的功能讓人眼前一亮。
WebPack的安裝
- 安裝命令
$ npm install webpack -g
- 使用webpack
$ npm init # 會自動生成一個package.json文件 $ npm install webpack --save-dev #將webpack增加到package.json文件中
- 可以使用不同的版本
$ npm install webpack@1.2.x --save-dev
- 如果想要安裝開發工具
$ npm install webpack-dev-server --save-dev
WebPack的配置
每個項目下都必須配置有一個 webpack.config.js ,它的作用如同常規的 gulpfile.js/Gruntfile.js ,就是一個配置項,告訴 webpack 它需要做什麼。
下面是一個例子
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件輸出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解決方案配置
resolve: {
root: 'E:/github/flux-example/src', //絕對路徑
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
- plugins 是插件項,這裏我們使用了一個 CommonsChunkPlugin的插件,它用於提取多個入口文件的公共腳本部分,然後生成一個 common.js 來方便多頁面之間進行復用。
- entry 是頁面入口文件配置,output 是對應輸出項配置 (即入口文件最終要生成什麼名字的文件、存放到哪裏)
- module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什麼加載器來處理。 所有加載器需要使用npm來加載
- 最後是 resolve 配置,配置查找模塊的路徑和擴展名和別名(方便書寫)
WebPack開始使用
這裏有最基本的使用方法,給大家一個感性的認識
- 正確安裝了WebPack,方法可以參考上面
- 書寫entry.js文件
document.write("看看如何讓它工作!");
- 書寫index.html文件
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
- 執行命令,生成bundle.js文件
$ webpack ./entry.js bundle.js
- 在瀏覽器中打開index.html文件,可以正常顯示出預期
- 增加一個content.js文件
module.exports = "現在的內容是來自於content.js文件!";
- 修改entry.js文件
document.write(require("./content.js"));
- 執行第四步的命令
進行加載器試驗
- 增加style.css文件
body { background: yellow; }
- 修改entry.js文件
require("!style!css!./style.css"); document.write(require("./content.js"));
- 執行命令,安裝加載器
$ npm install css-loader style-loader # 安裝的時候不使用 -g
- 執行webpack命令,運行看效果
- 可以在命令行中使用loader
$ webpack ./entry.js bundle.js --module-bind "css=style!css"
使用配置文件
默認的配置文件爲webpack.config.js
- 增加webpack.config.js文件
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
- 執行程序
$ webpack
發佈服務器
- 安裝服務器
$ npm install webpack-dev-server -g $ webpack-dev-server --progress --colors
- 服務器可以自動生成和刷新,修改代碼保存後自動更新畫面
http://localhost:8080/webpack-dev-server/bundle