Webpack 10分鐘入門

時間 2019-12-10

標籤 webpack 10分入門简体版

原文原文鏈接

能夠說如今但凡開發Single page application，webpack是一個不可或缺的工具。javascript

WebPack能夠看作是一個模塊加工器，如上圖所示。它作的事情是，接受一些輸入，通過加工產生一些輸出。html

輸入是咱們web前端項目的模塊文件，一般狀況下這些文件都不能直接被瀏覽器的JavaScript執行引擎所執行。前端

輸出是通過webpack加工後的能被瀏覽器使用的javascript和靜態資源文件。好比ES6的js轉成ES5的js，CSS預處理器文件轉成CSS文件等等。java

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

1. 新建一個文件夾，首先用npm init命令建立一個package.json:web

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

花了一分鐘才執行完畢。json

執行完畢後，檢查package.json, 發現webpack出如今devDependencies區域裏。瀏覽器

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

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

<html>

<div id="app"></div>

<script src="./dist/bundle.js"></script>

</html>

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

既然是模塊化開發，咱們就新建一個模塊，實現文件放在print.js裏：

function print(content){

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

}

module.exports = print;

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

有了module後，咱們還須要執行這個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文件夾下的資料看起來是這樣的：

執行命令行webpack：

執行完webpack後，打開index.html, 看到了咱們指望中的Hello Jerry:

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

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":

相關標籤/搜索

每日一句

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