webpack入門必知必會

時間 2019-11-12

標籤 webpack 入門必會简体版

原文原文鏈接

關於

微信公衆號：前端呼啦圈（Love-FED）
個人博客：勞卜的博客
知乎專欄：前端呼啦圈

前言

這是我第一篇介紹webpack的文章，先從一個入門教程開始吧，後續會有更多相關webpack的文章推出。javascript

首先什麼是webpack？若是說它是一個打包工具那真的是有點大材小用了。我我的認爲webpack是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你能夠根據本身的須要來進行一系列的配置和安裝，最終實現你須要的功能並進行打包輸出。html

本文做爲一篇入門教程，這裏先從webpack最簡單的3招開始介紹，即拆分、打包、壓縮。前端

步驟

1.傳統項目中的問題

在不依賴任何自動化、模塊化工具的項目中，一般咱們的代碼是這樣的：vue

index.htmljava

<html>
  <head>
    <title>傳統項目</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

app/index.jsnode

function main() {
    $('body').html('hello world!');
}

main();

以上示例中，腳本之間存在着隱式依賴關係。jquery

index.js取決於被包括在頁面運行以前的jQuery，它只是假設有一個全局變量$的存在。webpack

這樣管理JavaScript項目有一些問題：web

若是依賴項丟失，或者包含在錯誤的順序中，應用程序將不會運行。
若是包含依賴項但沒有使用，那麼瀏覽器必須下載不少沒必要要的代碼。npm

因此爲了解決以上問題，咱們須要使用webpack來實現一些改變。

2.準備

首先咱們得在項目中安裝webpack，咱們打開命令行工具運行：

mkdir demo && cd demo // 新建demo文件夾並打開
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安裝webpack2.0版本，mac系統可能須要添加sudo命令

以上使用的npm命令須要安裝node.js，能夠點擊這裏安裝便可：node.js

爲了改進上方傳統項目中的不足，咱們這裏還須要安裝jQuery：

npm install --save jQuery // 安裝jQuery

3.改變

改變後的index.js

var $ = require('jquery');

function main() {
    $('body').html('hello world!');
}

main();

這裏咱們能夠直接在index.js裏引用jQuery，index.js明確要求jQuery的存在，這樣就不存在隱式依賴的問題（沒有全局污染）。

改變後的index.html

<html>
  <head>
    <title>webpack項目</title>
  </head>
  <body>
      <script src="dist/bundle.js"></script>
  </body>
</html>

這裏咱們的index.html文件只引入了最終打包後的bundle.js。如今運行webpack命令將index.js輸出爲bundle.js。

運行命令：webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  270 kB       0  [emitted]  [big]  main
   [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [1] ./app/index.js 83 bytes {0} [built]

最終咱們在瀏覽器中打開index.html頁面能夠看到輸出的「hello world!」。

4.拆分

如今若是咱們index.js中的」hello world!」字符串須要放到另一個hello.js中，而後在index.js中引入使用的話，這就涉及到webpack模塊拆分的功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');

function main() {
    $('body').html(str);
}

main();

app/hello.js

var str = 'hello world!';

module.exports = str;

咱們在hello.js中經過module.exports導出str變量，而後在index.js經過require導入一樣能夠實現瀏覽器中輸入「hello world!」的效果，固然咱們須要從新運行下webpack命令：webpack app/index.js dist/bundle.js

5.打包

其實在上面咱們已經使用了打包命令：

webpack app/index.js dist/bundle.js

其中的app/index.js即爲打包的入口文件，而dist/bundle.js爲輸出文件。

可是咱們會發現這樣的命令不利於咱們複雜項目配置的使用，對於更復雜的配置，咱們能夠利用配置文件webpack.config.js來統一管理。

咱們能夠在demo文件夾下新建webpack.config.js配置文件：

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

上方配置中的entry就是咱們的入口文件，能夠有多個入口文件，而output即爲webpack打包的輸入對象，filename爲輸出文件名，path爲輸出路徑。

如此咱們運行命令行：

webpack --config webpack.config.js

一樣能夠生成打包目錄dist及打包文件bundle.js。

固然你也能夠直接運行簡化的命令：

webpack

webapck會自動去尋找當前目錄下的webpack.config.js文件。

6.壓縮

上一步咱們利用webpack命令將多個多件打包到了一個bundle.js的文件中，可是並未進行壓縮，你能夠打開bundle.js進行查看。

而若是咱們須要對打包後的代碼進一步壓縮處理，咱們能夠運行命令：

webpack -p

這時咱們能夠來進行下打包和壓縮的文件大小對比

打包命令：webpack

webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  270 kB       0  [emitted]  [big]  main
   [0] ./app/hello.js 50 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]

輸出的bundle.js整個文件大小爲270 kB。

壓縮命令：webpack -p

webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
    Asset     Size  Chunks             Chunk Names
bundle.js  88.3 kB       0  [emitted]  main
   [0] ./app/hello.js 50 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]

輸出的bundle.js整個文件大小爲88.3 kB。

很明顯，文件被壓縮了。

7.進一步壓縮優化

上方咱們經過webpack的壓縮命令將文件打包並壓縮了，可是對於webpack -p壓縮後的文件來講其實還有壓縮的餘地。若是你使用的是webpack1.0，那麼你能夠在配置文件中添加plugins配置項，而且加入以下插件：

var webpack = require('webpack');

module.exports = {
    ...
    plugins:[
        // 去除代碼塊內的告警語句
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        // 優先考慮使用最多的模塊，併爲它們分配最小的ID
        new webpack.optimize.OccurenceOrderPlugin()
    ]
    ...
}

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress選項默認爲false，而且OccurrenceOrderPlugin默認啓用，因此無需進行配置。

結語

本文主要介紹了webpack入門的一些簡單命令和基本配置信息，從代碼拆分、打包、壓縮的角度和傳統的前端項目進行對比，但願以此加深你們對webpack基礎知識的印象。

1. webpack入門必知必會
2. webpack必知必會
3. docker基礎入門之必知必會
4. Django入門必知必會操做
5. SQL入門經典+SQL必知必會
6. Redis入門必知必會超詳解
7. NLP入門必知必會(一)：Word Vectors
8. Python 入門必會知識
9. webpack入門--前端必備
10. WSGI必知必會
更多相關文章...
• PHP 表單 - 必需字段 - PHP教程
• Memcached入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。