超簡單 webpack 打包工具入門

時間 2019-11-10

標籤簡單 webpack 打包工具入門简体版

原文原文鏈接

對前端這個崗位來講，模塊化開發是必需要走的一個過程，這其中打包工具的使用必不可少，下面我就說一下 webpack 打包工具的用法，很是簡單，學會它，webpack 你就入門了。html

使用 webpack 前，你須要準備什麼？前端

安裝 node
淘寶鏡像 cnpm（最好有）
安裝 webpack

若是前兩步你都已經有了，那麼能夠直接跳轉到第三步，安裝 webpack 命令行以下：node

一、全局安裝 webpackwebpack

cnpm install -g webpack@1.13.2

這裏你能夠指定版本安裝，也能夠不指定，可是 webpack 的最新版本多是有問題的，因此要是安裝最新版本，可要作好項目不能運行的準備（我就碰到了，悲傷）git

二、建立一個空文件，並進入，及本地安裝項目運行時的依賴（若是你已經安裝了 git，能夠直接右鍵=>git bash here若是沒有，能夠 win+r => cmd 命令行進入），而後本地安裝web

cnpm install --save-dev webpack@1.13.2

三、依賴項所有下載完以後，建立一個 package.json 文件，建立完成以後，若是你的 package.json 文件夾裏面沒有不少的依賴項，總共只有簡短的十幾行的話，那就從第二步重來一遍，其中，命令跑完以後，會跳出不少關於項目的描述，一路 enter 默認過去就行npm

cnpm init

四、若是接下來的步驟中，你不知道怎麼出問題了，怎麼也解決不了，能夠刪除 webpack ，而後從新來過，否則你會很頭疼的json

npm uninstall webpack -g (全局卸載)

五、在本地安裝完成以後，你就能夠敲代碼了，首先在空文件下建立兩個文件夾，一個存放源碼，一個存放瀏覽器讀取的代碼，建立的方式有不少種，不太高大上一點，你可使用 git 命令瀏覽器

mkdir app //存放源碼
mkdir public //存放瀏覽器讀取的文件

而後在 app 文件夾下指定兩個文件，一個是 Greeter.js，一個是 main.js（作入口文件使用），public 文件夾下指定 index.html 文件，而後整個的結構樹以下：bash

其中，bundle.js 是咱們編譯後的文件名稱，後面有解釋

其中，index.html 的文件內容以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>//直接引入接下來要編譯的文件名稱
    </body>
</html>

Greeter.js 文件內容以下：

module.exports = function () {
    var greet = document.createElement("div");
    greet.textContent = "Hello Webpack";
    return greet;
}

main.js 文件內容以下：

const greeter = require("./Greeter.js");
document.querySelector("#root").appendChild(greeter());

其實呢，到了這一步，你就能夠直接在控制檯打包應用了，經過 webpack "入口文件路徑" "編譯後的文件路徑" （實際編譯引號不帶，可是這種方法容易出錯），使用最廣的打包方式是 webpack 打包，步驟以下：

六、在項目的根目錄下建立一個 webpack.json.js 的文件，裏面的內容以下：

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
}

這其中呢，對初學者來講有很大的坑，但願你們別犯，就是"__dirname"是兩個下劃線，不是一個，哎，好悲傷，其中呢，entry 是指定的入口文件路徑，__dirname 是 node.js 的一個變量，指向的當前的目錄；output 是打包後的文件所存放的地方和生成的編譯文件的名稱，而後呢，就能夠直接在控制檯打印了，若是和下面的差很少，那就表明成功了

而後你就能夠嚮往常同樣的方式打開 index.html 文件就能夠了，

感謝這兩篇文章的貢獻者，謝謝

https://www.jianshu.com/p/42e11515c10f

http://www.javashuo.com/article/p-fphbndte-by.html