webpack基礎(chǔ)–安裝教程

一、創(chuàng)建webpack-first文件夾作為站點(diǎn)，創(chuàng)建app文件夾存放js原始模塊（main.js 和 greeter.js） 創(chuàng)建?public文件夾存放index.html和打包后的bundle.js文件

1、找到自己項(xiàng)目的目錄
　　npm install -g webpack //全局安裝webpack

2、初始化package.json文件
　　npm init
3、站點(diǎn)下安裝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將函數(shù)作為返回值，成為一個(gè)共享的模塊，只要引入Greeter文件就能使用

5、編寫main.js文件

　　var greeter = require(“./Greeter.js?1.1.11”);
　　document.getElementById(“root”).appendChild(greeter());

　　//引入require()—-Greeter.js模塊?
　　//獲取html-dom元素將 調(diào)用的方法返回值 放在dom元素中

6、執(zhí)行命令進(jìn)行打包，

　　webpack app/main.js public/bundle.js

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

html文件代碼：

//調(diào)用的是打包后的bundle文件

?

?

?

?

二、像以上的方式方法 如果模塊比較多的話會(huì)很不方便，然后我們每次都需要執(zhí)行入口文件，出口打包目錄，很容?易出錯(cuò)。有沒有什么簡(jiǎn)單的方式，讓我們每次打包都執(zhí)行一個(gè)單詞或者更簡(jiǎn)單，一下便是方法：

　　定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡(jiǎn)單的JavaScript模塊，可以把所有的與構(gòu)建相關(guān)的信息放在?里面。

　　還是繼續(xù)上面的例子來說明如何寫這個(gè)配置文件，在當(dāng)前練習(xí)文件夾的根目錄下新建一個(gè)名為?webpack.config.js的文件，并在其中進(jìn)行最最簡(jiǎn)單的配置，如下所示，它包含入口文件路徑和存放打包后文件的地?

方的路徑。

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中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄。（如果該配置文件在app下那么指向app文件夾）