webpack基礎--安裝教程

一、建立webpack-first資料夾作為站點，建立app資料夾存放js原始模組（main.js 和Greeter.js） 建立 public資料夾存放index.html和打包後的bundle .js檔

#1、找到自己專案的目錄
　　npm install -g webpack //全域安裝webpack

2、初始化package.json檔案
　　npm init
#3、網站下安裝webpack建立依賴
　　npm install --save-dev webpack
4、寫Greeter.js檔案

#　　module. exports=function(){
　　var greet = document.createElement("div");
　　greet.textContent = "Hi there and greetings";
　　return greet;
　　}##　#　　//module.exports將函數作為回傳值，成為一個共享的模組，只要引入Greeter檔案就能使用

5、寫main.js檔案

##　　var greeter = require("./Greeter.js?1.1.11");

　　document.getElementById("root").appendChild(greeter());

　　/　　/　　/　　/　　/ /引入require()----Greeter.js模組 
　　//取得html-dom元素將呼叫的方法傳回值放在dom元素中

6、執行指令進行打包，

　　webpack app/main.js public/bundle.js

　　//全域安裝webpack之後可以這樣寫， app/main.js是入口主文件public/bundle.js是將該命 名空 
　　間的檔案打包到public中，也就是和html在一個目錄下。



html檔案代碼：

/title>

#

//呼叫的是打包後的bundle檔案

 

 

#   二、像以上的方式方法如果模組比較多的話會很不方便，然後我們每次都需要執行入口文件，出口打包目錄，很容 易出錯。有沒有什麼簡單的方式，讓我們每次打包都執行一個單字或更簡單，一下便是方法：#　　定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模組，可以把所有的建置相關的資訊放在 裡面。 　　還是繼續上面的範例來說明如何寫這個設定文件，在目前練習資料夾的根目錄下新建一個名為 

#webpack.config.js的文件，並在其中進行最最簡單的配置，如下所示，它包含入口檔案路徑與存放打包後檔案的地 

######################################## ###方的路徑。 ########################1、在webpack.config.js下這樣設定###　　module.exports = {#######　　entry : __dirname + "/app/main.js?1.1.11",//已多次提及的唯一入口檔案######　　output: {######　　path: __dirname + "/public" ,//打包後的檔案存放的地方######　　filename: "bundle.js?1.1.11"//打包後輸出檔案的檔案名稱######　　}#######　　} ###### ############註：「__dirname」是node.js中的一個全域變量，它指向目前執行腳本所在的目錄。 （如果該設定檔在app下那麼指向app資料夾）##########

以上是webpack基礎--安裝教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！