一小時的時間，上手 Webpack

時間 2020-04-26

標籤一小時時間上手 webpack 简体版

原文原文鏈接

本文由公衆號 字節逆旅 的主筆 慢一拍 寫做而成， 慢一拍 已認證成爲圖雀社區專欄做者，後續將爲你們帶來一系列 Webpack 的文章，敬請期待✌️。歡迎加入圖雀社區，一塊兒創做精彩的免費技術實戰教程，加速技術的傳播！
若是您以爲咱們寫得還不錯，記得 點贊 + 關注 + 評論 三連，鼓勵咱們寫出更好的教程💪javascript

爲何要用構建工具？若是你只會js+css+html，最多再加上jquery，那麼當你聽到構建工具這個說法是否是蒙的？這種狀況下我不建議你學習webpack，建議你學下 vue 或者 react 框架，這兩個框架都有本身的腳手架，所謂腳手架就是別人用構建工具幫你搭好了原始項目，你能夠在不懂構建工具的狀況下進行前端開發。不過這就是初級前端的基本工做，給我一個環境，讓我安心的寫業務代碼。css

實際上，僅僅作上述工做也沒什麼很差，你能夠鑽研 css，研究js深度語法，甚至去不斷精進算法與數據結構都是高級進階之路。html

我想說的是若是你有一天對webpack感興趣了，ok，歡迎你來到大前端世界！webpack是一個強大且可擴展的前端構建工具，還有包括grunt、gulp等同類工具都是基於node.js爲底層驅動平臺實現的。前端

爲何須要構建或者說編譯呢？由於像es六、less及sass、模板語法、vue指令及jsx在瀏覽器中是沒法直接執行的，必須通過構建這一個操做才能保證項目運行，因此前端構建打包很重要。除了這些，前端構建還能解決一些web應用性能問題，好比：依賴打包、資源嵌入、文件壓縮及hash指紋等。具體的我再也不展開，總以前端構建工程化已是趨勢。vue

至於爲何選擇webpack，由於這個工具配置很是靈活，支持插件化擴展，社區生態很豐富，官方迭代更新速度快，做爲程序員，這是一個靠譜的選擇。java

好了，廢話很少說，下面直接上乾貨，教你半小時上手，用webpack構建開發一個小項目。學東西要快，能夠不用理解清楚每一個概念，先動手，否則等你學會得要一個星期了。node

1、node安裝

首先要保證你的電腦有node環境，node安裝比較簡單，直接在官網https://nodejs.org/en/下載nod...，注意這裏有兩個版本，左邊是穩定版本，右邊是最新版本，通常用穩定版本就能夠了。具體的安裝過程不是本文的主要內容，網上有不少安裝教程。有了node環境，後面就能夠經過npm進行webpack的安裝，npm是一個包管理工具，安裝node就會自動安裝npm。若是有必要我能夠在個人公衆號裏也寫個教程。react

2、webpack安裝及配置

一、webpack安裝

首先建立一個my_webpack文件夾做爲項目文件夾，進入當前文件夾，經過命令行工具cmd執行如下命令：jquery

npm init -y
npm install webpack webpack-cli --save-dev

安裝完了檢查版本，確認安裝成功webpack

./node_modules/.bin/webpack -v

安裝成功後，文件夾下面會有這些內容

二、webpack配置

而後在根目錄建立一個空配置文件webpack.config.js，建立如下內容：

'use strict'
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: 'index.js'
    },
    mode: 'production',
}

entry表明打包入口，output須要指定輸出地址及打包出來的文件名，mode指開發環境。而後在項目根目錄中建立src文件夾及dist文件夾，src文件夾裏建立index.js及hellowebpack.js兩個文件，最後在dist目錄建立一個index.html文件，完整目錄以下：

hellowebpack.js文件裏輸入如下內容：

export function hellowebpack() {
    return 'hellowebpack'
}

接着在index.js中引用hellowebpack.js文件中的這個函數

import {hellowebpack} from './hellowebpack'
document.write(hellowebpack())

這個時候到./node_modules/.bin/目錄下執行webpack打包命令，咱們會看到dist目錄下多出一個index.js文件，打開會看到壓縮代碼。

咱們在dist目錄下的indext.html文件建立以下內容，在瀏覽器打開此頁面就能看到效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./index.js" type="text/javascript"></script>
</body>
</html>

看到這應該明白了吧，在src目錄下面是開發內容，後面用 webpack 代碼打包後，會在 dist 目錄下生成一個index.js 文件，最後在index.html頁引用，這就是webpack打包項目的基本流程。

前面在運行打包要進入 ./node\_modules/.bin/ 目錄下執行 webpack打包命令，比較麻煩，這裏添加一個配置就能夠更方便打包。在 package.json 文件下的 script 節點添加一項配置 "build": "webpack"，而後再刪掉 dist 目錄，再運行 npm run build 就能夠方便地打包了。

3、webpack入門示例

一、webpack解析es6

到這一步須要掌握一個新的概念：loaders，所謂loaders就是說把本來webpack不支持加載的文件或者文件內容經過loaders進行加載解析，實現應用的目的。這裏講解es6解析，原生支持js解析，可是不能解析es6，須要babel-loader ，而babel-loader 又依賴babel。來看步驟：先安裝babel-loader，

npm i @babel/core @babel/preset-env babel-loader -D

再在根目錄建立 .babelrc 文件，增長如下內容

{
    "presets": [
        "@babel/preset-env",
    ]
}

接着在webpack.config.js文件下添加module屬性，屬性內容是一個rules集合，內容以下

// ...
module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
         ]
      }
// ...

rules集合的每一個元素都是一個文件類型的配置信息，這裏只有一個js文件，後面會講到css、less及各類格式的圖片等；test是一個正則，用來匹配文件後綴名；use表示此loader名稱。

前面例子裏建立了hellowebapck.js文件，而後在index.js文件中被引用。裏面用到的import是es6方法，有的瀏覽器並不支持es6，若是直接用webpack打包在這瀏覽器上是會出錯的，可是剛纔已經安裝並配置了babel-loader，能夠實現解析es6方法，babel還能夠解析jsx語法。如今執行npm run build進行構建，就能夠看到效果是成功的。（這個其實用一個ie瀏覽器就能夠驗證es6解析先後的效果）

二、webpack加載css、less等樣式文件

css-loader用於加載css文件並生成commonjs對象，style-loader用於將樣式經過style標籤插入到head中

安裝loader

npm i style-loader css-loader -D

// ...
module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
         ]
        }
// ...

注意，這裏的解析css用到了兩個loader，因此use對象裏是個數組，須要格外注意到loader順序，是先寫style-loader，再寫css-loader,可是執行的時候是先加載css-loader，將css解析好後再將css傳遞給style-loader；

接下來在項目中加一個public.css文件，在裏面寫入一個樣式：

.color-text {
    font-size: 20px;
    color: red
}

將此文件在src/index.js文件中引用，以下所示。

咱們知道此文件作爲打包入口文件，最後打包後在dist目錄下，咱們能夠直接到dist目錄下的index.html文件內，添加一個div標籤，加上樣式名color-text，以驗證樣式打包及引用效果

<body>
    <script src="./index.js" type="text/javascript"></script>
    <div class="color-text">text-color</div>
</body>

而後運行npm run build命令，執行成功後，在瀏覽器打開dist目錄下index.html文件，會看到如下內容，樣式文件被成功打包併發揮了做用：

解析less文件也是同樣的，直接把public.css文件改爲less後綴，此時是不能解析的，須要安裝less依賴，添加配置。

安裝less相關依賴

npm i less less-loader -D

添加less文件解析配置

// ...
module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
           ]
        }
// ...

這些步驟完成後，再運行 npm run build 命令進行打包，最後在瀏覽器查看 dist\index.html ，會發現效果是同樣的。

三、webpack加載圖片

圖片在webpack中的打包步驟跟上面相似，只不過loader不一樣。

安裝file-loader

執行如下命令，安裝file-loader依賴

npm i file-loader -D

而後在webpack.config.js配置文件 module 節點下添加解析配置內容：

{
    test: /.(jpg|png|gif|jpeg)$/,
    use: 'file-loader'
}

隨便找一張圖片放在src目錄下，在同級目錄的public.css文件中加上背景圖片樣式，輸入內容以下：

.color-text {
    font-size: 20px;
    color: red;
    height: 500px;
    background: url(beautiful.jpg) no-repeat;
}

而後運行npm run build命令進行構建，最後執行時並無圖片展現，可是咱們在dist目錄下發現了剛纔打包過來的圖片，如圖所示。這就尷尬了，雖然圖片是打包過來了，問題是我每次還在拷貝複製一下名稱再引用，這很不科學。

有沒有更好的辦法加載圖片呢？答案是確定的！看步驟：

安裝url-loader

npm i url-loader -D

url-loader直接內置了file-loader，是對它的再封裝，在配置文件裏能夠直接去掉file，用url替換。

在webpack.config.js文件添加配置內容，注意limit是指圖片大小上限，單位是字節，若是圖片大小小於這個值，就會被打包爲base64格式，不然就還是圖片。因爲這個圖片有120K，我這裏設置爲160000，差很少是150多K了。

{
    test: /.(jpg|png|gif|jpeg)$/,
    use: [{
        loader:'url-loader',
        options: {
            limit:160000,
            name: 'imgs/[name].[hash].[ext]'
        }
    }]
}

執行npm run build查看效果，發現成功了，再看dist目錄下的index.js文件，發現內容多了不少，其實就是多了這張圖片的base64數據。