使用工具:sublimeText+node+git
1,一个包的文件结构,生成初始文件
- 在node 命令行窗口中创建demo_a文件夹
- 使用命令 npm init 初始化包,生成package.json,定义index.js为入口文件
- 新建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
- 初始化本地版本库,git init
- 输入 echo "# demo_a" >> README.md,生成readme.md文件
- 输入git add * 添加文件到缓存区
- 输入 git commit “注释”
- 输入 git remote add origin https://github.com/xx/xx.git 关联版本库
- 输入 git push -u origin master 上传版本库
上传github过程中,node_module目录下的文件上传出错,暂时不知道什么原因
github地址为需要的可自行下载:https://github.com/liangkeno/demo_a