webstorm 相关nodejs设置

本文转载自查看原文 2017-06-20 18:12 6556 nodejs/ webstorm技巧

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试提交</h1>
</body>
</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热更新配置小结

其他参考

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

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

gulp设置-开发环境到线上环境上传布置

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 任务名