学习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命令行窗口，安装关联包

　　

 //webpack 安装包
 npm install webpack --save-dev

 //在webpack.config.js配置，自动构建生成html
 npm install html-webpack-plugin --save-dev

 //在webpack.config.js配置，用于创建服务器，并监听js变化刷新浏览器
 npm install webpack-dev-server --save-dev

3，输入sub.js与index.js文件内容

 //sub.js
 function createH(){
      var h1=document.createElement('h1');
      h1.innerHTML="hello";
      return h1;
  }
  module.exports=createH;

 //index.js
 var createh1=require('./app/sub.js');

 document.body.appendChild(createh1());

4，在webpack.config.js里面设置入口文件，输出文件，定义html自动构建插件，创建服务器配置

 var path=require('path');
 var htmlWebpackPlugin=require('html-webpack-plugin');

 //路径
 var ROOT_PATH=path.resolve(__dirname);
 var APP_PATH=path.resolve(ROOT_PATH,'app');
 var BUILD_PATH=path.resolve(ROOT_PATH,'build');

 module.exports={
     entry:ROOT_PATH,
     output:{
         path:BUILD_PATH,
         filename:'bundle.js'
     },

     //插件,自动生成html
     plugins:[
         new htmlWebpackPlugin({
             title:'hello world !'
         })
     ],

     //创建服务器配置，需要在package.json配置运行命令，如下script，启动时，在node中运行 npm start
 /*     "scripts": {
     "start":"webpack-dev-server --hot --inline"
      }*/
     devServer:{
         historyApiFallback:true,
         hot:true,
         inline:true,
         progress:true
     }
 }

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