webstorm 相關nodejs設置

時間 2019-11-19

標籤 webstorm 相關 nodejs 設置欄目 Storm 简体版

原文原文鏈接

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

Coding Assistance -【enabled】html

2.webstorm 安裝webpacknode

首先要保證安裝nodejs jquery

alt+f12調出控制檯webpack

在項目目錄安裝 webpack和webpack-dev-server（全局安裝）git

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

安裝相關依賴web

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

2) npm

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

文檔：

gulp 官網 -入門指南

插件列表搜索-官網例如上傳項目文件到服務器 gulp-ftp gulp-sftp 搜索upload

npm gulp插件

參考資料

gulp & webpack整合，魚與熊掌我都要！

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

gulp教程之gulp中文API