Webpack教學 (二) :檔案你要去哪裡?

上一篇我們在介紹webpack是什麼東西(沒看過趕快去看XD),接下來我們來談談細節的配置,我們已經可以做基本的輸出了,上篇教學説我們會分兩個資料夾src跟dist,src是指我們的開發檔案,輸出到dist是編譯過後的檔案,但是要怎麼指定src跟dist輸出的路徑呢?

首先你要了解webpack是建立在nodejs上面的工具,webpack只負責編譯,搬檔案就要靠nodejs的api來幫忙啦!

nodejs 要搬移任何的檔案都要靠一個叫path的api來做(文件在此)所以我們來看,首先要在webpack.config.js 用 require 的方式來引入path的模組。

var path = require(‘path’);

然後在module.exports裡一開始加入 context這個屬性,裡面使用path.resolve 這個方法來指定一開始的路徑

context: path.resolve(__dirname, ‘src’),

__dirname在nodejs裡面代表的一個特殊的變數,只的是當前執行文件所在目錄的完整目錄位置,所以我們要設定path.resolve第一個參數__dirname,然後指定第二個參數,從src資料夾開始找檔案。

好啦!開始創一個src資料夾跟把我們要編譯的js放到src資料夾裡面

這是目前的webpack.config.js設定

螢幕快照 2018-11-08 下午6.05.04

好啦!實際跑跑看,開終端機跑

> npm run build

記得你的package.json 的script ,如果不知道請參考上一篇文章

 

編譯過程
它會自動幫你放入dist資料夾內(預設)

但是今天你想要輸出不是在dist資料夾內呢?

有些時候我們跟後端配合專案會需要把檔案自動給放到其他資料夾內,而不是dist,那要怎麼做?

這時候我們可以在 output 設定裡面重新指定路徑,像這樣

螢幕快照 2018-11-08 下午6.12.00
我重新指定路徑跟一個新的資料夾叫App

在output裡面可以用一個path的屬性,在使用 path.resolve

path: path.resolve(__dirname, ‘App’),

重新執行

> npm run build
你會看到新build出來的檔案在名叫App的資料夾內

這樣你就成功的可以指定打包出來的路徑,想讓檔案去哪裡就哪裡!

 

最後

webpack還有很多好用且方便的功能,日後我會一一介紹到,幫助大家更了解webpack。

工商時間

線上課程 — JavaScript & TweenMax 動態特效速成實戰

線上課程 — 超越入門!Webpack 前端自動化開發

本文轉載自 Mike ,原文標題為:Webpack教學 (二) :檔案你要去哪裡?

 

作者: YOTTA

YOTTA是台灣擁有最多專業老師的線上募資課程平台。當你對生活感到不足、覺得自己還有更多可能,卻苦無更多充分的時間進修額外專長、自我提升,YOTTA 提供了通往不同領域的階梯,讓你用最短的時間,創造最大的可能。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s