WebPack 簡明學(xué)習(xí)教程

WebPack是什么

  1. 一個(gè)打包工具
  2. 一個(gè)模塊加載工具
  3. 各種資源都可以當(dāng)成模塊來處理
  4. 網(wǎng)站 http://webpack.github.io/

如今，越來越多的JavaScript代碼被使用在頁面上，我們添加很多的內(nèi)容在瀏覽器里。如何去很好的組織這些代碼，成為了一個(gè)必須要解決的難題。

對于模塊的組織，通常有如下幾種方法：

  1. 通過書寫在不同文件中，使用script標(biāo)簽進(jìn)行加載
  2. CommonJS進(jìn)行加載（NodeJS就使用這種方式）
  3. AMD進(jìn)行加載（require.js使用這種方式）
  4. ES6模塊

思考：為什么只有JS需要被模塊化管理，前臺的很多預(yù)編譯內(nèi)容，不需要管理嗎？

基于以上的思考，WebPack項(xiàng)目有如下幾個(gè)目標(biāo)：

  • 將依賴樹拆分，保證按需加載
  • 保證初始加載的速度
  • 所有靜態(tài)資源可以被模塊化
  • 可以整合第三方的庫和模塊
  • 可以構(gòu)造大系統(tǒng)

從下圖可以比較清晰的看出WebPack的功能


這是一個(gè)示意圖

WebPack的特點(diǎn)

  1. 豐富的插件，方便進(jìn)行開發(fā)工作
  2. 大量的加載器，包括加載各種靜態(tài)資源
  3. 代碼分割，提供按需加載的能力
  4. 發(fā)布工具

WebPack的優(yōu)勢

  • webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
  • 能被模塊化的不僅僅是 JS 了。
  • 開發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
  • 擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。

WebPack的安裝

  1. 安裝命令
$ npm install webpack -g
  1. 使用webpack
$ npm init  # 會(huì)自動(dòng)生成一個(gè)package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中
  1. 可以使用不同的版本
$ npm install webpack@1.2.x --save-dev
  1. 如果想要安裝開發(fā)工具
$ npm install webpack-dev-server --save-dev

WebPack的配置

每個(gè)項(xiàng)目下都必須配置有一個(gè) webpack.config.js ，它的作用如同常規(guī)的 gulpfile.js/Gruntfile.js ，就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么。

下面是一個(gè)例子

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件項(xiàng)
    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: {
        //查找module的話從這里開始查找
        root: 'E:/github/flux-example/src', //絕對路徑
        //自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名
        extensions: ['', '.js', '.json', '.scss'],
        //模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};
  1. plugins 是插件項(xiàng)，這里我們使用了一個(gè) CommonsChunkPlugin的插件，它用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè) common.js 來方便多頁面之間進(jìn)行復(fù)用。
  2. entry 是頁面入口文件配置，output 是對應(yīng)輸出項(xiàng)配置 （即入口文件最終要生成什么名字的文件、存放到哪里）
  3. module.loaders 是最關(guān)鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。 所有加載器需要使用npm來加載
  4. 最后是 resolve 配置，配置查找模塊的路徑和擴(kuò)展名和別名（方便書寫）

WebPack開始使用

這里有最基本的使用方法，給大家一個(gè)感性的認(rèn)識

  1. 正確安裝了WebPack，方法可以參考上面
  2. 書寫entry.js文件
document.write("看看如何讓它工作！");
  1. 書寫index.html文件
<html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
 <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
 </body>
</html>
  1. 執(zhí)行命令，生成bundle.js文件
$ webpack ./entry.js bundle.js
  1. 在瀏覽器中打開index.html文件，可以正常顯示出預(yù)期
  2. 增加一個(gè)content.js文件
module.exports = "現(xiàn)在的內(nèi)容是來自于content.js文件！";
  1. 修改entry.js文件
document.write(require("./content.js"));
  1. 執(zhí)行第四步的命令

進(jìn)行加載器試驗(yàn)

  1. 增加style.css文件
body {
 background: yellow;
}
  1. 修改entry.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./content.js"));
  1. 執(zhí)行命令，安裝加載器
$ npm install css-loader style-loader   # 安裝的時(shí)候不使用 -g
  1. 執(zhí)行webpack命令，運(yùn)行看效果
  2. 可以在命令行中使用loader
$ webpack ./entry.js bundle.js --module-bind "css=style-loader!css-loader"

使用配置文件
默認(rèn)的配置文件為webpack.config.js

  1. 增加webpack.config.js文件
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};
  1. 執(zhí)行程序
$ webpack

發(fā)布服務(wù)器

  1. 安裝服務(wù)器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
  1. 服務(wù)器可以自動(dòng)生成和刷新，修改代碼保存后自動(dòng)更新畫面
http://localhost:8080/webpack-dev-server/bundle

WebPack常用命令

$ webpack --display-error-details

后面的參數(shù)“--display-error-details”是推薦加上的，方便出錯(cuò)時(shí)能查閱更詳盡的信息（比如 webpack 尋找模塊的過程），從而更好定位到問題。

$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
$ webpack --watch //監(jiān)聽變動(dòng)并自動(dòng)打包
$ webpack -p //壓縮混淆腳本，這個(gè)非常非常重要！
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,382評論 7贊 35
  • GitChat技術(shù)雜談 前言 本文較長，為了節(jié)省你的閱讀時(shí)間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,916評論 7贊 110
  • 在現(xiàn)在的前端開發(fā)中，前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,690評論 1贊 32
  • 我來也無聲 我去也無痕 悠悠歲月里 青山相依歸 青山與白云，千年歲月，感情一直沒變??！ 一個(gè)靜靜守候，一個(gè)飄蕩四方...
    力牧閱讀 275評論 0贊 0
  • 12月的第一天對很多人來說都再平凡不過了，但是，我想趁著明天到來之際把小木和小蘇的故事講給你聽。 小木和小蘇之間是...
    淮暖暖閱讀 1,046評論 7贊 3

友情鏈接更多精彩內(nèi)容