一、建立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檔案代碼：
#
//呼叫的是打包後的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中文網其他相關文章！
