一、創建webpack-first文件夾作為站點，創建app文件夾存放js原始模塊（main.js 和 Greeter.js） 創建 public文件夾存放index.html和打包後的bundle.js文件 1、找到自己項目的目錄 npm install -g webpack //全局安裝webp ...
一、創建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");
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文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個webpack練習</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
//調用的是打包後的bundle文件
</body>
</html>
二、像以上的方式方法 如果模塊比較多的話會很不方便，然後我們每次都需要執行入口文件，出口打包目錄，很容 易出錯。有沒有什麼簡單的方式，讓我們每次打包都執行一個單詞或者更簡單，一下便是方法：
定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，可以把所有的與構建相關的信息放在 裡面。
還是繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為 webpack.config.js的文件，併在其中進行最最簡單的配置，如下所示，它包含入口文件路徑和存放打包後文件的地
方的路徑。
1、在webpack.config.js下這樣配置
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包後的文件存放的地方
filename: "bundle.js"//打包後輸出文件的文件名
}
}
註：“__dirname”是node.js中的一個全局變數，它指向當前執行腳本所在的目錄。（如果該配置文件在app下那麼指向app文件夾）
