web前端开发安装 前端开发需要配置什么环境

web前端开发安装 前端开发需要配置什么环境很多朋友对这方面很关心，我爱编程网整理了相关文章，供大家参考，一起来看一下吧！

前端开发需要配置什么环境

web前端开发环境的搭配：

A、Sublime3安装配置：

Sublime跨平台的前端开发神器,是一个共享软件,免费使用；下载最新Sublime3安装包； 我爱编程网

-官网地址:

-安装包管理器

打开Sublime3控制台,ctrl+~

输入安装包管理器命令代码，注意需要联网才能安装,因为是在线下载包

包管理器的官网地址:

-安装第三方插件(包)

打开命令面板:ctrl+shift+p；

输入install,然后回车，然后可以搜索想要的插件,回车安装；Atom工具使用

B、Atom工具使用：

由github发布的前端开发工具，集成了chrome的调试工具，是一款非常强大和开发的开发工具平台。在file里面的setting里面进行设置,包括字体的大小,快捷键,背景颜色主题等；

官网地址：

C、WebStorm10的安装与使用：

WebStrom是最专业的前端IDE开发工具，是一个非常重量级的开发工具,是专业为我们前端设计的IDE,用他来开发是效率非常高；

D、总结三款开发工具的优劣：

Sublime3:需要安装第三方的包，一般。Atom：集成度非常好，也很轻，需要自己安装第三方的包。Webstrom：大项目，建议使用webstrom，非常强大，但是也很重。

web前端开发需要哪些工具？

Web前端是一个新兴职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是初学小白亦或是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。今天千锋武汉给大家分享一下Web前端开发用什么软件。

1、Sublime Text

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

2、Dreamweaver

Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。

3、Visual Studio Code

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。

4、HBuilder

HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

5、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。千锋武汉网站上有以上这些工具的安装包，需要的小伙伴自己去下载吧。

【Web前端基础】webpack全局安装失败怎么办？

WebPack的安装，采用的是命令行npm形式的安装。
d://切到d盘
mkdir webpack_demo//在d盘下新建webpack_demo文件夹
cd webpack_demo//进入该文件夹下
npm install -g webpack //全局安装webpack
（备注如果这样安装会出现提示安装webpack-cli；这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack）
npm uninstall -g webpack //先卸载之前安装的webpack
npm install -g webpack@3.6.0 //安装低版本webpack
全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，
初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，
包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
npm init//初始化项目，可以一路回车生成的package.json文件
npm install --save-dev webpack@3.6.0 //官方不太支持全局安装，会锁定版本，因此对项目目录安装
安装完成后可以查看版本号 webpack -v
安装完成后新建webpack.config.js配置文件基本配置
const path = require(‘path’);

const uglify = require(‘uglifyjs-webpack-plugin’);//代码压缩
module.exports={
//入口文件的配置项

entry:{

entry:'./src/entry.js',

//这里我们又引入了一个入口文件

entry2:'./src/entry2.js'

},

//出口文件的配置项

output:{

//输出的路径，用了Node语法

path:path.resolve(__dirname,'dist'),

//输出的文件名称

filename:'[name].js'

},

//模块：例如解读CSS,图片如何转换，压缩

module:{

rules: [

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]//处理样式的loader

}

]

},

//插件，用于生产模版和各项功能

plugins:[

new uglify()//代码压缩

],

//配置webpack开发服务功能

devServer:{

//设置基本目录结构

contentBase:path.resolve(__dirname,'dist'),

//服务器的IP地址，可以使用IP也可以使用localhost

host:'localhost',

//服务端压缩是否开启

compress:true,

//配置服务端口号,可自定义

port:1717

}

}
（备注：安装webpack-dev-server时安装完后，运行报不是内部指令，需要在package.json中配置下）
“scripts”: {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"12345

},
如果还是报不是内部指令，则重新安装低版本 npm i webpack-dev-server@2.9.1
npm install --save-dev webpack

以上就是我爱编程网为大家带来的web前端开发安装 前端开发需要配置什么环境，希望能帮助到大家！