webpack入坑之旅（一）入門安裝

時間 2019-12-01

標籤 webpack 之旅入門安裝简体版

原文原文鏈接

學習一個新的東西，首先第一步就是安裝，有時候會遇到各類奇葩的問題css

至於什麼是webpack我這裏就不介紹了，請參考官網：https://github.com/webpack/webpackhtml

安裝

前提：由於webpack是一個基於node的項目，因此首先須要確保你的電腦裏面已經安裝了node.js，以及npm。在這裏我使用的版本是：node：v5.8.0 ，npm：3.7.3,如果版本問題，請更新到最新版。
如果有出現npm安裝過慢的狀況，可使用nrm這個項目來進行npm源地址的切換。node

首先咱們直接進行全局的安裝，運行以下命令：npm install webpack -g，可能須要一點時間。webpack

安裝成功後，在命令行輸入webpack -h便可查看當前安裝的版本信息。以及可使用的指令。git

固然，咱們都應該將webapck安裝到當前的項目依賴中，此時就可使用項目的本這樣就可使用項目本地版本的 Webpack。github

# 確保已經進入項目目錄
# 肯定已經有 package.json，沒有就經過
npm init 
# 建立，直接一路回車就好，後面再來詳細說裏面的內容。
# 安裝 webpack 依賴
npm install webpack --save-dev
# 簡單的寫法：-_-,縮寫形式 
npm i webpack -D
# –save：模塊名將被添加到dependencies，能夠簡化爲參數-S。
# –save-dev: 模塊名將被添加到devDependencies，能夠簡化爲參數-D。

安裝好以後咱們的package.json的目錄應該是這樣的：web

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "learn",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "learn"
  ],
  "author": "lanyan",
  "license": "ISC"
}

首先建立一個靜態頁面 index.html 和一個 JS 入口文件 entry.js,（這裏你想用什麼名字均可以，只須要在打包的時候讀取文件爲該名字就好，不過，到時候就知道這個名字的含義啦！）：npm

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="bundle.js"></script>
    <!-- 注意這裏引入的不是咱們建立的文件，而是用webpack生成的文件 -->
</body>
</html>

/*** entry.js ***/
document.getElementById('app').innerHTML="這是我第一個打包成功的程序";

文件都已經建立成功了，那麼就開始咱們的打包吧！json

webpack entry.js bundle.js瀏覽器

在瀏覽器中打開index.html，就能看到咱們設置的文字啦！：這是我第一個打包成功的程序

這麼簡單的功能直接在html中引入不就行了嗎？確實是這樣的，不過咱們這纔剛剛開始嘛，不要急。

下面咱們再來增長一個文件，名爲first.js內容以下：

var h2= document.createElement("h2")
h2.innerHTML="不是吧，那麼快第二個打包程序啦！";
document.body.appendChild(h2);

　　更改 entry.js:

document.getElementById('app').innerHTML="這是我第一個打包成功的程序";
//添加
require("./first.js");

　　再來進行一次重複的工做，再打包一次。webpack entry.js bundle.js，若是成功，打包過程會顯示日誌：

Hash: b1cfe7ff9d75ce235dc9
Version: webpack 1.12.14
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.82 kB       0  [emitted]  main
   [0] ./entry.js 208 bytes {0} [built]
   [1] ./first.js 145 bytes {0} [built]

Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。

刷新瀏覽器，能夠發現咱們的剛剛的代碼已經生效，又有了新的文字出現。

相關標籤/搜索

每日一句

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