設計轉前端 入門到放棄

本文章描述如何透過 webpack 使用 ES6 模組架構、配置。

• 你可以使用 GitHub 上的 demo project source code。
• 查看 demo 範例。

專案架構

設置：

- index.html
- package.json
- webpack.config.js 
- /src
    |- app.js
    |- /modules
    |- (不同的 module 資料夾)
- /dist
    |- bundle.js

•  index.html  是我們 HTML 文件，可將 JS 內容輸出至瀏覽器。
•  package.json  是我們整個專案架構的 meta data。也包含我們需要使用的第三方 Node.js 模組，之後再詳細說明。
•  webpack.config.js  是告訴我們 webpack 是要做什麼，要讀取哪些文件、及放置位置。是一個 JavaScript 文件。
•  /src/app.js  是我們所撰寫的 JavaScript 文件，我們也可以把它拆分更小的檔案（模組化）。
•  /src/modules  包含我們專案中較小或可重複使用的部分。
•  /dist  是我們輸出文件擺放的位置。 webpack 會幫我們打包我們寫的 JavaScript。
•  /dist/bundle.js  是 webpack 生成的文件，最後 index.html 會 include 這個檔案。

安裝 webpack

為了讓 webpack 在我們專案中可以使用，我們需要透過  npm  安裝他，打開你的 Terminal，切換到你的目錄，然後輸入：

npm install webpack --save

webpack 會被下載，且增加到 package.json 檔案。

webpack config

webpack config 配置文件是我們跟 webpack 說我們原始檔案放置的位置，以及我們打包好輸出的文件要放置在哪邊。

Entry

 Entry  是讓 webpack 知道這是我們原始檔案，從這裡開始。在範例中，我們告訴 webpack 使用  app.js  來開始。

entry: './src/app.js',

Output

output 是用來指定我們想要 webpack 產生的路徑和檔案名字，bundle.js  檔案是我們 index.html 所需要使用的 JavaScript 檔案。

output: {
    filename: './dist/bundle.js'
},

使用 ES6 模組

透過安裝、設置 webpack，準備好打包我們的原始碼。我們可以使用  import  和  export  JavaScript 關鍵字。

使用 export

例如在這專案架構有一個  /src/modules/math-functions.js  檔案，裡面有個 sum function 是用來加總的。

const sum = (a, b) => {
    return a + b;
};

在文件底部我們可以看到  export {sum, ...}; 

export {sum, product};

這讓我們在專案其他地方可以重複使用  sum  這個 function，但為了要這樣我們得先  import  這個 function。

使用 import

回到上一層的  App.js  這裡有一些  import  的句子。

import {sayHello} from './modules/greeting';
import {sum, product} from './modules/math-functions';

這些讓我們可以使用我們模組 export 的 function、物件、或變數。

這一行  import {sum, ...} from './modues/math-functions';  讓我們在  app.js  可以呼叫  sum  這個 function（要在同一個文件）。

const a = 3;
const b = 7;

// ...

resultSum.textContent = `The sum of ${a} and ${b} is ${sum(a, b)}. ✨`;

把它放在一起

最後一個難題是  webpack  指令，為了開始打包成 bundle.js 檔。

我們透過  package.json  設置  script  入口。

"scripts": {
    "start": "npm run webpack",
    "webpack": "webpack -d --watch"
},

我們的 command 會使用 debug mode 執行 webpack，可以幫助我們在我們專案不能執行時馬上提供訊息，也可以監聽我們對 JavaScipt 做的改變，當我們改檔案時，webpack 就會自動重新打包  bundle.js  這個檔案。

所以在我們要使用 JavaScript 在我們專案之前，開啟我們的 terminal，切換到專案目錄，然後輸入  npm start 。webpack 監聽會讀 config 然後產生 bundle.js 檔案。

可以開始編輯 JavaScript 文件，並用瀏覽器打開 index.html 檔案測試你的 ES6 模組！

原文出處：

https://medium.com/@svinkle/getting-started-with-webpack-and-es6-modules-c465d053d988