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 [email protected] --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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。