2. 程式人生 > >webpack入坑之旅（一）不是開始的開始

webpack入坑之旅（一）不是開始的開始

阿新 • • 發佈：2018-08-06
targe base 增加 -i pre 版本 uil 靜態頁 obi

最近學習框架，選擇了vue，然後接觸到了vue中的單文件組件，官方推薦使用 Webpack + vue-loader構建這些單文件 Vue 組件，於是就開始了webpack的入坑之旅。
因為原來沒有用過任何的構建工具與模塊化工具，所以本系列會十分的基礎。並且可能有很多不正確的地方，希望大家諒解，並指出錯誤幫助改進。謝謝！

什麽是webpack

Webpack 是德國開發者 Tobias Koppers 開發的模塊加載器兼打包工具，在webpack中，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。因此, Webpack 當中 js 可以引用 css, css 中可以嵌入圖片 dataUrl。
對應各種不同文件類型的資源, Webpack 有對應的模塊 loader比如vue用的是vue-loader

當然這是後話，在後面我們再來說。

請看下圖：
技術分享圖片

https://github.com/webpack/webpack

安裝

前提：因為webpack是一個基於node的項目，所以首先需要確保你的電腦裏面已經安裝了node.js，以及npm。在這裏我使用的版本是：node：v8.11.2 ，npm：6.2.0,若是版本問題，請更新到最新版。
若是有出現npm安裝過慢的情況，可以使用nrm這個項目來進行npm源地址的切換。或者使用使用淘寶出品的 cnpm

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

安裝成功後，在命令行輸入webpack -h

即可查看當前安裝的版本信息。以及可以使用的指令。

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

1
2
3
4
5
6
7
8
9
10
11
 
# 確保已經進入項目目錄
# 確定已經有 package.json，沒有就通過
npm init
# 創建，直接一路回車就好，後面再來詳細說裏面的內容。
# 安裝 webpack 依賴

npm install webpack webpack-cli --save-dev
# 簡單的寫法：-_-,縮寫形式
npm i webpack webpack-cli -D
# –save：模塊名將被添加到dependencies，可以簡化為參數-S。
# –save-dev: 模塊名將被添加到devDependencies，可以簡化為參數-D。

安裝好之後我們的package.json的目錄應該是這樣的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "this is my first-demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "guowenfh",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0"
  }
}

既然環境都已經安裝好了，那麽我們就開始來用webpack進行我們的第一個打包運行程序吧！

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

1
2
3
4
5
6
7
8
9
10
11
 
<!-- index.html -->
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="./dist/bundle.js"></script>
    <!-- 註意這裏引入的不是我們創建的文件，而是用webpack生成的文件 -->
</body>
</html>
 
1
2
 
/*** entry.js ***/
document.getElementById(‘app‘).innerHTML="這是我第一個打包成功的程序";

文件都已經創建成功了，那麽就開始我們的打包吧！

由於我們將 webpack 安裝在了 項目目錄。所以是不會向終端寫入 webpack 命令的，這時我們可以像 npm script 中加入命令 :

1
2
3
 
"scripts": {
  "start": "webpack entry.js --output-filename=./bundle.js --mode=development"
},

然後我們運行 npm run start,就會執行 webpack entry.js --output-filename=./bundle.js --mode=development。

或者我們可以借用 npm 內置的執行器做到同樣的事情 npx webpack entry.js --output-filename=./bundle.js --mode=development

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

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

下面我們再來增加一個文件，名為first.js內容如下：

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

更改 entry.js:

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

再來進行一次重復的工作，再打包一次。webpack entry.js --output-filename=./bundle.js --mode=development，如果成功，打包過程會顯示日誌：

1
2
3
4
5
6
7
 
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 的時候再執行。

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

  • 本文作者： guowenfh
  • 本文鏈接： http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/

webpack入坑之旅（一）不是開始的開始

相關推薦

webpack入坑之旅（一）不是開始的開始

targe base 增加 -i pre 版本 uil 靜態頁 obi 最近學習框架，選擇了vue，然後接觸到了vue中的單文件組件，官方推薦使用 Webpack + vue-loader構建這些單文件 Vue 組件，於是就開始了webpack的入坑之旅。因為原來沒有用過

webpack入坑之旅（五）加載vue單文件組件

file loader clu html中 type 修改 mode hid extension 需要什麽？ 在經過前面的四個練習，相信已經對於webapck有了一定的了解，現在我們就來一個綜合案例，進一步加深對於webpack的理解。 首先我們應該思考要解析.vue類型的

webpack入坑之旅（二）loader入門

pts 文章 加載 dep javascrip mode 這就是 插件 可能 這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack 在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表： 引子 在上一篇博客中我們已

webpack入坑之旅（三）webpack.config入門

boot edm com new 使用 ble 內容 require 以及 這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack，在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表： 在上面我們已經嘗試過了兩種對

dotNet程序員的Java爬坑之旅（一）

是我 方法 轉java 自己的 java pri 也好 工作 計劃 　　　　仔細想了下還是轉java吧，因為後期不管是留在北京也好還是回老家也好，java的工作都會好找一點。現在的工作主要還是寫.net，目標是下一次離職的時候可以找到一份全職的java工作，我一直都覺得實踐

小程式wepy踩坑之旅（一）---- thirdScriptError sdk uncaught third Error module "npm/lodash/_nodeUtil.js

     近期一直在學小程式，作為新手，比較了下mpvue和wepy兩個小程式框架，mpvue作為美團剛出來的vuejs開發看起來很不錯，學習成本很低，但是對於在實際專案開發中，mpvue剛出來，很多資料，比如踩坑，比較少，而we

大疆無人機Android版SDK開發踩坑之旅（一）----前言

　　最近一段時間一直在做大疆無人機安卓版開發，這水也是挺深的，不仔細看官網SDK的介紹就會遇到各種各樣的坑，簡單記錄一下，希望可以讓其他人少走一些彎路。 　　安卓端用到的SDK大概有兩種：Android SDK和Android UX SDK 　　Android SDK（官網介紹）: 　　開發人員可以通過SDK

小程式wepy踩坑之旅（一）---- thirdScriptError sdk uncaught third Error module "npm/lodash/_nodeUtil.js

     近期一直在學小程式，作為新手，比較了下mpvue和wepy兩個小程式框架，mpvue作為美團剛出來的vuejs開發看起來很不錯，學習成本很低，但是對於在實際專案開發中，mpvue剛出來，

weex採坑之旅（一）初識weex

按照官方文件搭好weex依賴環境後，安裝專案依賴包，執行npm run dev 和 npm run serve開啟watch模式和靜態伺服器。 然後開啟瀏覽器，輸入 http://localhost:8080/index.html，既可以看到 weex h5 的頁面，但

dotNet程序員的Java爬坑之旅（三）之spring MVC篇一

www. let ref ide filter ESS pro enc require 使用maven構建springMVC項目，開發工具為IDEA 一、構建Maven項目，模板為WebApp 二、在pom文件中配置SpringMvc配置（springMvc需要以來serv

webpack+react+node採坑之旅 （上）

前言 之前一直以為能力已經夠了，想出去找份前端的工作，後來才發現還是自己太差，面試官隨便一個問題就能把我問啞，比如，webpack、gulp、grunt這些工具瞭解多少。這兩天學習webpack，踩了不少坑，也學到不少東西，記錄下來以便後查。 說明 本

Vue2.0新手入坑環境搭建（一）

clas min 團隊 定義 自定義 ini 創建 https idt 每周不定期更新 專業團隊接APP 外包 聯系QQ1129580542 vue-cli 是一個官方發布 vue.js 項目腳手架，使用 vue-cli 可以快速創建 vue 項目，GitHu

css重構之旅（一）

rdquo lan set 變化 部分 網站 一個 寬度 lang css重構之旅 >前言： 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去，馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術，反而忽略了最基礎

小白的linux學習之旅（一）

探索linux一、進入系統*）普通用戶登陸student 普通用戶，密碼student*)超級用戶登陸 —〉not listed 點擊未列出 username 提示輸入用戶名稱 —〉root root 為系統超級用戶 passw

react爬坑之路（一）--報錯output.path不是絕對路徑

bpa file 文件 開始 put pac 這就是 文件頭部 之前 　　之前，一直在糾結是學習angular好，學習vue好，還是學習react好，網上一搜索，也是各種對比，各種互噴，看過之後更糾結。就跟小時候一樣糾結長大了是上清華好，還是上北大好，最後證明我想多了。總之

Ubuntu搭建Hadoop的踩坑之旅（三）

namenode 結束 ctu mapreduce 分布 使用 framework 2.6 start 之前的兩篇文章介紹了如何從0開始到搭建好帶有JDK的Ubuntu的過程，本來這篇文章是打算介紹搭建偽分布式集群的。但是後來想想反正偽分布式和完全分布式差不多，所幸直接介紹

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目 （增補）

web http class 模板 clas ebp 搭建 com png cd 指定好安裝目錄 vue init webpack 項目名稱 執行 vue vue list 查看可應用模板 vue init webpack +名字

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目

wrong run 自己 文件的 ima tca 來安 mage 前綴 vue-cli 是一個官方發布 vue.js 項目腳手架，使用 vue-cli 可以快速創建 vue 項目，GitHub地址是：https://github.com/vuejs/vue-cli 一、

dotNet程序員的Java爬坑之旅（二）

模式 最好的 https servlet 很多 過濾器 () 被調用 回調 　　囉裏囉唆的寫了一大堆，最後還是全刪除了。哎~ 　　言歸正傳，最近因爲發生了很多事情，所以更新的有嗲晚了，最近也一直在學習，但是感覺效率什麼的不是很高，這是不對的，反思一下，從這篇博文開始，打起精

RabbitMQ學習之旅（一）

RabbitMQ學習總結(一) RabbitMQ簡介 RabbitMQ是一個訊息代理，其接收並轉發訊息。類似於現實生活中的郵局：你把信件投入郵箱的過程，相當於往佇列中新增資訊，因為所有郵箱中的信件最終都會彙集到郵局中；當郵遞員把你的新建傳送給收件人的時候，相當於訊息的轉發。 RabbitMQ中