學習webpack過程並上傳到github

使用工具：sublimeText+node+git

1，一個包的文件結構，生成初始文件

 

1. 在node 命令行窗口中建立demo_a文件夾 
2. 使用命令 npm init 初始化包，生成package.json，定義index.js爲入口文件
3. 新建webpack.config.js，index.js，app/sub.js文件

 

2，安裝關於webpack的包，安裝環境爲局部

打開node命令行窗口，安裝關聯包

　　

1 //webpack 安裝包
2 npm install webpack --save-dev
3 
4 //在webpack.config.js配置，自動構建生成html
5 npm install html-webpack-plugin --save-dev
6 
7 //在webpack.config.js配置，用於建立服務器，並監聽js變化刷新瀏覽器
8 npm install webpack-dev-server --save-dev

 

3，輸入sub.js與index.js文件內容

1 //sub.js 
2 function createH(){
3      var h1=document.createElement('h1');
4      h1.innerHTML="hello";
5      return h1;
6  }
7  module.exports=createH;
8 
9  

1 //index.js
2 var createh1=require('./app/sub.js');
3 
4 document.body.appendChild(createh1());

 

4，在webpack.config.js裏面設置入口文件，輸出文件，定義html自動構建插件，建立服務器配置

 1 var path=require('path');
 2 var htmlWebpackPlugin=require('html-webpack-plugin');
 3 
 4 //路徑
 5 var ROOT_PATH=path.resolve(__dirname);
 6 var APP_PATH=path.resolve(ROOT_PATH,'app');
 7 var BUILD_PATH=path.resolve(ROOT_PATH,'build');
 8 
 9 module.exports={
10     entry:ROOT_PATH,
11     output:{
12         path:BUILD_PATH,
13         filename:'bundle.js'
14     },
15 
16     //插件,自動生成html
17     plugins:[
18         new htmlWebpackPlugin({
19             title:'hello world !'
20         })
21     ],
22 
23     //建立服務器配置，須要在package.json配置運行命令，以下script，啓動時，在node中運行 npm start
24 /*     "scripts": {
25     "start":"webpack-dev-server --hot --inline"
26      }*/
27     devServer:{
28         historyApiFallback:true,
29         hot:true,
30         inline:true,
31         progress:true
32     }
33 }

 

5，在node中運行 npm start,便可在瀏覽器中訪問http://localhost:8080/，當js文件被更新時，自動刷新便於調試

 

最終生成目錄結構

　　

---

 

1，安裝git，並配置與github帳號的關聯 》》 詳情

2，登陸github帳號並建立一個倉庫，好比demo_a

1. 初始化本地版本庫，git init
2. 輸入 echo "# demo_a" >> README.md，生成readme.md文件
3. 輸入git add * 添加文件到緩存區
4. 輸入 git commit 「註釋」
5. 輸入 git remote add origin https://github.com/xx/xx.git 關聯版本庫
6. 輸入 git push -u origin master 上傳版本庫

 上傳github過程當中，node_module目錄下的文件上傳出錯，暫時不知道什麼緣由

github地址爲須要的可自行下載：https://github.com/liangkeno/demo_a