webpack入門

什么是Webpack寒瓦,以及它的工作方式被冒?

webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)适室。當 webpack 處理應(yīng)用程序時货邓,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)公浪,其中包含應(yīng)用程序需要的每個模塊他宛,然后將所有這些模塊打包成一個或多個 bundle。


image.png

Webpack的優(yōu)點欠气?

  • JavaScript厅各、CSS代碼的合并和壓縮
  • CSS預(yù)處理:Less、Sass预柒、Stylus的編譯
  • 生成雪碧圖(CSS Sprite)
  • ES6 轉(zhuǎn)成瀏覽器大多都支持的ES5
  • 模塊化加載

理解四個核心概念:

  • 入口(entry)
  • 輸出(output)
  • 加載器(loader)
  • 插件(plugins)
入口

入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊队塘,來作為構(gòu)建其內(nèi)部依賴圖的開始袁梗。進入入口起點后,webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的憔古,在webpack.config.js中配置:
module.exports = { entry: './path/to/my/entry/file.js' };

輸出

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles遮怜,以及如何命名這些文件。你可以通過webpack.config.js在配置中指定一個 output 字段鸿市,來配置這些處理過程:

const path = require('path');
module.exports = {
      entry: './path/to/my/entry/file.js',
      output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js'
      }
};

我們通過 output.filename 和 output.path 屬性锯梁,來告訴 webpack bundle 的名稱,以及我們想要生成到哪里

loader

讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)焰情。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊涝桅,然后你就可以利用 webpack 的打包能力,對它們進行處理烙样。
本質(zhì)上,webpack loader 將所有類型的文件蕊肥,轉(zhuǎn)換為應(yīng)用程序的依賴圖可以直接引用的模塊谒获。
在更高層面,在 webpack 的配置中 loader 有兩個目標壁却。

  1. 識別出應(yīng)該被對應(yīng)的 loader 進行轉(zhuǎn)換的那些文件批狱。(使用 test 屬性)
  2. 轉(zhuǎn)換這些文件,從而使其能夠被添加到依賴圖中(并且最終添加到 bundle 中)(use 屬性)
const path = require('path');
const config = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
  },
  module: {
        rules: [
              { 
                  test: /\.txt$/, 
                  use: 'raw-loader' 
              }
        ]
    }
};
插件

loader 被用于轉(zhuǎn)換某些類型的模塊展东,而插件則可以用于執(zhí)行范圍更廣的任務(wù)赔硫。插件的范圍包括,從打包優(yōu)化和壓縮盐肃,一直到重新定義環(huán)境中的變量爪膊。插件接口功能極其強大,可以用來處理各種各樣的任務(wù)砸王。
想要使用一個插件推盛,你只需要 require() 它,然后把它添加到 plugins 數(shù)組中谦铃。多數(shù)插件可以通過選項(option)自定義耘成。你也可以在一個配置文件中因為不同目的而多次使用同一個插件,這時需要通過使用 new 操作符來創(chuàng)建它的一個實例驹闰。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
const path = require('path');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;
webpack打包步驟
  1. 以管理員的身份運行cmd,并進入項目目錄
  2. 運行npm install webpack --global,安裝全局webpack
  3. 運行npm init奸腺,初始化項目生成package.json
  4. 運行npm install webpack --save-dev诲侮,安裝本地webpack作為依賴
  5. 運行webpack +入口文件名+輸出文件名,即可完成打包
1bb80950-1705-4b4c-8bcb-5e1a37308ff6.jpg
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末骡显,一起剝皮案震驚了整個濱河市疆栏,隨后出現(xiàn)的幾起案子曾掂,更是在濱河造成了極大的恐慌,老刑警劉巖壁顶,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件珠洗,死亡現(xiàn)場離奇詭異,居然都是意外死亡若专,警方通過查閱死者的電腦和手機许蓖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來调衰,“玉大人膊爪,你說我怎么就攤上這事『坷颍” “怎么了米酬?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長趋箩。 經(jīng)常有香客問我赃额,道長,這世上最難降的妖魔是什么叫确? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任跳芳,我火速辦了婚禮,結(jié)果婚禮上竹勉,老公的妹妹穿的比我還像新娘飞盆。我一直安慰自己,他們只是感情好次乓,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布吓歇。 她就那樣靜靜地躺著,像睡著了一般檬输。 火紅的嫁衣襯著肌膚如雪照瘾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天丧慈,我揣著相機與錄音析命,去河邊找鬼。 笑死逃默,一個胖子當著我的面吹牛鹃愤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播完域,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼软吐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吟税?” 一聲冷哼從身側(cè)響起凹耙,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤姿现,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后肖抱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體备典,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年意述,在試婚紗的時候發(fā)現(xiàn)自己被綠了提佣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡荤崇,死狀恐怖拌屏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情术荤,我是刑警寧澤倚喂,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站瓣戚,受9級特大地震影響务唐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜带兜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吨灭。 院中可真熱鬧刚照,春花似錦、人聲如沸喧兄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吠冤。三九已至浑彰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拯辙,已是汗流浹背郭变。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留涯保,地道東北人诉濒。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像夕春,于是被迫代替她去往敵國和親未荒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 寫在前面 第一次接觸webpack及志,是在一個react項目參與中片排,剛開始使用的時候寨腔,甚至不知道是做什么用的,只看到...
    默默先生Alec閱讀 660評論 0 3
  • GitChat技術(shù)雜談 前言 本文較長率寡,為了節(jié)省你的閱讀時間迫卢,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,698評論 7 110
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺勇劣,特此分享以備自己日后查看靖避,也希望更多的人看到...
    小小字符閱讀 8,178評論 7 35
  • 一.什么是 Webpack Webpack 是一個模塊打包器。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析比默,然后將這些模塊按...
    逍遙g閱讀 779評論 0 0
  • 工具清單 1.硬紙板 2.封面紙(材質(zhì)不限命咐,好看就行篡九,不過建議不要太厚,因為越薄的紙在包角的時候越精細) 3.扉頁...
    土土的垚閱讀 27,998評論 7 59