1.设置nodejs  【Setting】-【Default Settings】直接添加node.exe 

Coding Assistance -【enabled】

2.webstorm 安装webpack

首先要保证安装nodejs 

alt+f12调出控制台

在项目目录安装 webpack和webpack-dev-server（全局安装）

D:\xiangcloud\webpack\xxxcms>npm -i webpack webpack-dev-server -g

安装相关依赖

1) D:\xiangcloud\webpack\xxxcms>npm install webpack -g

 2) 

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack

3)

D:\xiangcloud\webpack\xxxcms>npm install --save-dev css-loader

4)

D:\xiangcloud\webpack\xxxcms>npm install --save-dev style-loader

5)

D:\xiangcloud\webpack\xxxcms>npm install --save-dev json-loader

6) 这里要全局安装webpack-dev-server -g

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack-dev-server -g

7)

D:\xiangcloud\webpack\xxxcms>npm install --save-dev html-loader

8）

D:\xiangcloud\webpack\xxxcms>npm install --save-dev file-loader

安装完成后，项目目录里生成node_modules文件夹

初始化项目

D:\xiangcloud\webpack\xxxcms>npm init

完成后项目里生成package.json

 以下是实例输出

新建一个index.html

    
    


测试提交

新建js文件命名webpack.config.js

entry 定义入口文件

output 输出文件

module.exports={
    entry:'./index.js',
    output:{
        filename:'bundle.js'//打包输出的文件是bundle.js
    }
}

新建index.js

document.addEventListener('DOMContentLoaded',function () {
    console.log('hi')
})

这时候修改index.html  添加　

就是打包生成的JS

控制台里输入webpack生成

 然后在输入webpack-dev-server

如果出现

D:\xiangcloud\webpack\xxxcms>webpack-dev-server
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

解决办法：

1)项目package.json里 scripts 添加server 

写入

"server":"webpack-dev-server"

控制台输入npm run server

2) 从新全局安装webpack-dev-server

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack-dev-server -g

浏览器输入http://localhost:8080/ 

实时修改更新到浏览器功能并没有显示，谷歌浏览器测试截图

 结构

双击index.html 点击谷歌浏览器浏览

测试结果成功

 git提交的时候请先本地安装git.exe

文档

github-webpack-dev-server

devServer参数文档

参考资料：

使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现

关于Webstorm webpack经常不能自动热更新问题

webpack-dev-server不是内部或外部命令

webstorm+webpack创建项目

 http://webpack.github.io/docs/webpack-dev-server.html

Webpack多入口文件、热更新等体验

webpack热模块替换（HMR）/热更新

webpack热更新配置小结

webpack热更新配置小结

其他参考

使用WebStorm创建/运行/调试React Native项目

关于 webpack-dev-server 中 html 文件的自动刷新

webstorm里安装gulp  alt+f12调出控制台 全局安装

D:\xiangcloud\webpack\xxxcms>npm install -g gulp

作为项目的开发依赖（devDependencies）安装：

D:\xiangcloud\webpack\xxxcms>npm install --save-dev gulp

文件上传  开发环境到线上环境文件部署

安装 gulp-ftp插件

D:\xiangcloud\webpack\xxxcms>npm install --save-dev gulp-ftp

gulp-ftp使用方法  插件的使用方法 直接在http://gulpjs.com/plugins/ 搜索 点击对应名字链接 

项目里建立gulpfile.js文件 写入代码

下面是代码

var gulp = require('gulp');
var gutil = require('gulp-util');
var ftp =require('gulp-ftp');
gulp.task('default',function () {
    // 默认任务
    return gulp.src('*')
        .pipe(ftp({
            host:'ip或者域名',
            user:'用户名',
            pass:'密码',
            port:'21',//端口号
            remotePath:'' //上传到远程服务器目录路径
        }))
        .pipe(gutil.noop())
})

　控制台里执行gulp 默认任务直接执行，如果是有任务名 执行gulp 任务名

文档：

gulp 官网 -入门指南

插件列表搜索-官网  例如上传项目文件到服务器  gulp-ftp gulp-sftp 搜索upload

npm gulp插件

参考资料

gulp & webpack整合，鱼与熊掌我都要！

webstrom配置使用之git和gulp  git 配置 加上gulp安装

gulp教程之gulp中文API

下载JetBrains IDE Support

浏览器配置

添加

出现图标就是安装完成

 配置端口 和IP

 端口和webstorm里配置要一致

参考资料：

 WebStorm 与 Chrome 热加载配置

Framework7

http://framework7.taobao.org/docs/dom.html#用法示例

Chrome 谷歌浏览器 因adobe flash player 因过期而遭到阻止 解决方案

url地址栏输入chrome://plugins/

下载最新的flash

https://get2.adobe.com/cn/flashplayer/

查看组件   新版谷歌移除了chrome://plugins/

chrome://components/