webpack4.0入個門

super_YUE發表於2019-02-22
Web

為什麼要學習webpack

webpack是現在主流的前端構建工具，主流公司的專案中幾乎都有他的存在。很多同學接觸到現代前端可能就是學習的Vue，vue-cli腳手架會自動幫你生成一個web工程，他就是基於webpack進行構建的。但是隻會使用現成的腳手架工具是遠遠不夠的，想要更深入的瞭解其中的執行機制還得自己從0開始搭建web工程。下面我們開始從0搭建一個簡單的入門級demo。

入門要點

本篇文章針對的是webpack小白，看完之後呢，你將會了解到大致的webpack執行流程啦。簡單的來說就是，就是我們寫的檔案從哪兒來到哪兒去的這麼一個流程。話不多說，開始動手吧。

開始動手

首先建立一個資料夾webpackStudy作為我們的工程檔案。

初始化

進入webpackStudy資料夾中，在命令列中使用npm init來初始化生成一個新的 package.json 檔案。然後根據命令列中的提示自行設定工程名稱，版本號，專案描述等選項。然後我們的資料夾目錄就會多出一個package.json檔案，這個檔案會把web工程中的一些依賴、命令、描述等集中起來，它相當於一張製造圖紙。

然後我們進行webpack的安裝，webpack4.0在安裝webpack的同時還需要進行webpack-cli的安裝。執行命令npm install -D webpack webpack-cli(-D的意思是安裝本地依賴)。

接下來，我們需要新增以下目錄或檔案。

webpack-demo
|- package.json
|- src
    |- index.js
|- webpack.config.js
複製程式碼
  • src目錄是開發目錄
  • index.js是入口檔案，負責開發目錄與打包器的連線。
  • webpack.config.js是webpack的配置檔案，他負責操作webpack這個打包器。

入口（entry）

entry會指示webpack應該使用哪個模組，來作為起點模組，然後在進入起點模組以後，webpack會對起點模組的各個依賴模組進行載入和分析。

webpack.config.js

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    }
}
複製程式碼

以上就是對入口的簡單配置，在上面的entry物件中，配置的是單入口，會載入以index為模組名稱的模組。path模組是js自帶模組，用於處理檔案路徑和目錄路徑。

出口（output）

有入口就有出口，output屬性會告訴webpack在哪裡輸出它經過處理後建立的檔案，以及如何命名這些檔案。在web工程中，整個應用程式結構都會被編譯到所指定的輸出路徑的資料夾中。

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    }
}
複製程式碼

上面的示例當中，我們指定輸出路徑為當前目錄結構下的，dist目錄，輸出的檔名為bundle.js。

下面我們進行簡單的測試

src/index.js

console.log("hello world");
複製程式碼

package.json

略...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
複製程式碼

對index.js寫入列印程式碼，同時對package.json寫入script執行命令。build命令的意思是，執行npm run build時，會呼叫webpack處理webpack.config.js(預設處理檔案)檔案。

執行npm run build，此時的目錄結構變成

webpack-demo
|- dist
    |-bundle.js
|- package.json
|- src
    |- index.js
|- webpack.config.js
複製程式碼

執行node dist/bundle，控制檯輸出hello world。

執行時的警告
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to
'development' or 'production' to enable defaults for each environment.
是因為沒有選擇模式造成的，忽略即可。
複製程式碼

裝載（loader）

webpack自身只能理解JavaScript檔案，但是專案中肯定會有其他的檔案，最常用的肯定是圖片檔案和css檔案，webpack需要依靠各類loader去處理非Javascript檔案，將他們轉換成webpack能夠有效進行處理的模組，然後webpack會對他們進行打包處理然後輸出。下面來進行css檔案和圖片檔案的處理。首先安裝依賴npm install -D style-loader css-loader url-loader。

const path = require("path");

module.exports = {
略···
    module: {
        rules: [
            {
                test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]    
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192, //檔案大小限制
                        name: 'images/[name].[ext]?[hash]'
                    }
                }    
            }
        ]
    }
}
複製程式碼
  • test選項用於標識出應該被對應的loader進行轉換的某種檔案。
  • use選項表示轉換時對應的loder。use對應的陣列的處理順序是從後往前。
  • options可以進行一些選項的配置，圖片處理中limit選項是限制檔案的大小，而name選項中的name是對應的檔名，ext則是檔案的字尾，hash則是該檔案的hash碼。

測試

向src目錄中新增圖片，以及新建一個style.css檔案。向dist目錄新增一個index.html檔案,來展示打包後的內容。

webpack-demo
|- dist
    |-index.html
    |-bundle.js
|- package.json
|- src
    |- index.js
    |- img.png
    | -style.css
|- webpack.config.js
複製程式碼

src/index.js

import "./style.css"
import imgUrl from "./img.png"

function createComponent(){
    var element = document.createElement('div');
    element.innerHTML = ['hello webpack'];
    return element;
}
function createImg(){
    var imgBox = document.createElement('img');
    imgBox.src = imgUrl;
    return imgBox;
}

document.body.append(createComponent(),createImg());
複製程式碼

src/style.css

body{
    text-align: center;
    color: blueviolet;
    font-size: 40px;
    font-weight:bold;
}
複製程式碼

dist/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpackStudy</title>
</head>
<body></body>
<script src="./bundle.js"></script>
</html>
複製程式碼

執行npm run build後，然後開啟dist裡面的index.html你將會看到你再src/index.js裡面寫的內容。

外掛（plugins）

前面說到，webpack會把工程目錄下的檔案處理然後打包到dist目錄中去。按理說，dist目錄中不應該由我們建立檔案的，所以這時候外掛（plugins）派上用場了。

外掛相對於loader來說，可以執行更廣的任務，從打包到壓縮，到分割檔案...它可以用來處理各種各樣的任務。下面我們將用上html-webpack-plugin外掛來處理dist目錄中的html檔案自動生成，並載入bundle資源問題。

首先安裝依賴npm install -D html-webpack-plugin

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    略...
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest' //設定html檔案檔名稱,
        })
    ]
}
複製程式碼

我們新增了外掛html-webpack-plugin,然後刪除dist檔案中的html檔案,然後執行npm run build命令後會發現,dist目錄中會自動建立index.html檔案並載入bunlde.js,這都是外掛在發揮作用。

dev-server

在實際的開發中，我們不可能每進行一次修改後就打包一次，這樣無疑是非常低效的。所以我們需要一個工具，可以隨時讓我們看到我們寫的效果。webpack-dev-server就是這樣一個工具，下面我們來進行安裝和使用。首先安裝依賴npm install -D webpack-dev-server

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack"，
    
},
複製程式碼
  • package.json中的dev命令的意思是，執行npm run dev時，會呼叫webpack-dev-server工具來執行webpack.config.js(預設檔案)。
  • --open選項的意思是執行該命令時自動開啟瀏覽器訪問。

執行npm run dev會自動開啟瀏覽器，並訪問http://localhost:8080(預設埠,如8080埠被佔用會依此類推)。

github

程式碼在我的github倉庫step1分支。

END

至此，我們就可以算是對webpack4.0入了個門。我們寫出了一個簡易的webpackdemo，大致瞭解了webpack進行打包處理，如何使用loader，如何使用外掛，如何安裝webpack-dev-server以便於在開發中使用。當然webpack的世界遠不止於此，還有更多的內容等著我們去了解。

想用webpack做更多事情可以看我的另一篇文章《webpack4.0+vue+es6配置》

相關文章