学习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

posted @ 2016-07-25 17:51  lokou  阅读(1653)  评论(0)  编辑  收藏  举报