Webpack 10分鐘入門

null1145 發(fā)布于2019-08-26 11:43 / 1003人閱讀

摘要：它做的事情是，接受一些輸入，經過加工產生一些輸出。這個例子只花費分鐘時間，就能讓我們熟悉的基本用法。執(zhí)行完畢后，檢查發(fā)現出現在區(qū)域里。為此，新建一個文件，輸入下列內容最后，我們得生成使用到的文件。字段定義了的輸入輸出則放在當前目錄下面的里。

可以說現在但凡開發(fā)Single page application，webpack是一個不可或缺的工具。

WebPack可以看做是一個模塊加工器，如上圖所示。它做的事情是，接受一些輸入，經過加工產生一些輸出。

輸入是我們web前端項目的模塊文件，通常情況下這些文件都不能直接被瀏覽器的JavaScript執(zhí)行引擎所執(zhí)行。

輸出是經過webpack加工后的能被瀏覽器使用的javascript和靜態(tài)資源文件。比如ES6的js轉成ES5的js，CSS預處理器文件轉成CSS文件等等。

我們來動手做一個具體的例子。這個例子只花費10分鐘時間，就能讓我們熟悉webpack的基本用法。

1. 新建一個文件夾，首先用npm init命令創(chuàng)建一個package.json:

在下面使用命令行npm install --save-dev webpack，安裝webpack并保存到項目的package.json的devDependencies下面。

花了一分鐘才執(zhí)行完畢。

執(zhí)行完畢后，檢查package.json, 發(fā)現webpack出現在devDependencies區(qū)域里。

此時項目文件夾層次結構如下圖：

2. 新建一個index.html文件，輸入以下內容：

從源代碼看出，這個html引用了一個webpack打包之后生成的輸出文件。

既然是模塊化開發(fā)，我們就新建一個模塊，實現文件放在print.js里：

function print(content){

    window.document.getElementById("app").innerText = "Hello," + content;

}

module.exports = print;

這個模塊就實現了一個print函數，把傳入的字符串顯示在index.html的id為app的div標簽里。

有了module后，我們還需要執(zhí)行這個module。為此，新建一個main.js文件，輸入下列內容：

const print = require("./print.js");

print("Jerry");

最后，我們得生成index.html使用到的bundle.js文件。為此，我們要給webpack定義一個任務，通過新建文件webpack.config.js完成。

entry字段定義了webpack的輸入：main.js, 輸出則放在當前目錄dist下面的bundle.js里。

const path = require("path");

module.exports = {

entry: "./main.js",

output: {

filename: "bundle.js",

path: path.resolve(__dirname, "./dist"),

},

mode: "development" // 設置mode

};

至此，webpack_demo文件夾下的資料看起來是這樣的：

執(zhí)行命令行webpack：

執(zhí)行完webpack后，打開index.html, 看到了我們期望中的Hello Jerry:

至此，一個最簡單的webpack例子就跑通了。

要獲取更多Jerry的原創(chuàng)文章，請關注公眾號"汪子熙":

GPU云服務器云服務器三分鐘入門微信發(fā)10分鐘以上視頻微信怎么發(fā)10分鐘視頻 10分鐘了解Jmeter性能測試工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/107423.html

前端學習資源

摘要：提供了完整的環(huán)境，并且支持自定義域名指向，動態(tài)計算資源調整，可以完成各種應用的開發(fā)編譯與部署。 react 新特性 react16 Context 算法相關圖解排序算法(二)之希爾排序微信小程序微信小程序組件化的解決方案移動端尺寸基本知識瀏覽器前端必讀：瀏覽器內部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關系瀏覽器緩存 CSS學習移動web開發(fā)布局入...

zhisheng 2019-08-20 13:33 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

awesome23 2019-08-20 18:23 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

antyiwei 2019-08-29 13:03 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

KavenFan 2019-08-01 17:16 評論0 收藏0
20分鐘gulp快速入門

摘要：所以出現了各種前端構建化工具也應運而生等已經成為現在前端開發(fā)工程師的必備技能之一。結語今天的分享就告一段落啦希望能對大家有所幫助。在互聯(lián)網告訴發(fā)展的今天，自node出現后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業(yè)務日益復雜化和多元化，模式也都想webPage模式轉向webApp模式，拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經是很久遠的曾經了，而且...

RichardXG 2019-08-22 15:06 評論0 收藏0