写在前面:这篇博客主要介绍 前端软件选择及npm安装webpack系列。本文也融入了作者实践中的一些感触。
上一篇关于前端的博客node.js安装及npm设置介绍了node(包含npm)之后。有段时间我就在想在想既然涉及到前端,得找个合适的前端ide。在公司问了个资深的前端,推荐我sublime和vscode。自己也私下里看了好多的前端ide评价。综合评估了下,最后选择了sublime,Hbuilder。选sublime是看重它的轻量级和扩展性,对于学习本来就要多敲代码,sublime就是个高级记事本这点没问题,如果以后用它工作了,可以通过安装插件提高效率,这是我比较看好的。Hbuilder 先放着以后弄APP的时候在研究。
sublime安装:
环境win7 sublime3
- 下载安装文件sublime3安装文件 分享码2bi1
- sublime3是收费的,可以先安装,装完后到下面网址看注册方法 注册码及配置
- 好了之后,打开sublime3,发现真不错(至少看着挺舒服的)。
npm安装webpack、webpack-cli、webpack-dev-server
用我的理解大致说下3个模块的功能,系统了解还是要去官网看看:
webpack: 打包插件,在前端的作用可以类比下maven在后端的功能;老板本包含webpack-cli,新版本不包含。
webpack-cli: weipack命令行客户端,可以执行webpack命令的工具;。
webpack-dev-server: webpack本地开发服务器,基于node.js。就类似于apache、nginx用做web服务器的。
npm安装模块有两种方式。全局方式和本地方式(安装到项目路径下),至于该用那种方式安装,这个我还真的不是很清楚。上篇文章配置的既是全局安装的一些配置。
就我个人理解,node.js,npm,webpack都是为开发时提高开发效率的,真正生产环境应该不会装这些东西的。要是图方便就装全局就OK了,多个项目可以共享资源。要是想做到资源隔离,那就本地安装就好了。因为接触还不是很多,先给出结论,后续验证。实践过程中发现,webpack系列安装过程中依赖package.json,而这个文件是npm init初始化项目的产物。言外之意就是webpack是项目相关的。所以在开发的过程中还是本地安装比较合适。
安装webpack:
全局安装:npm install -g webpack 本地安装:npm install webpack
安装webpack-cli:
全局安装:npm install -g webpack-cli 本地安装:npm install webpack-cli
安装webpack-dev-server:
全局安装:npm insall -g webpack-dev-server 本地安装:npm install webpack-dev-server
webpack 打包应用:
webpack直接打包:
webpack app/main.js public/bundle.js
配置webpack.config.js 后打包:
webpack
module.exports = {
mode:'development',
//devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer:{
contentBase:__dirname + "/public",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true//实时刷新,查了下这个默认就是true
}
}
其中mode、entry、等都可以在cmd里通过webpack --help查看 output:{path.. 对应--output-path。__dirname是node.js里的全局变量,表示当前执行脚本所在的路径,这个里面都是自己配置的啊
配置package.json后打包
npm run build 或者 npm start 或者npm run server 启动服务
前者有参数,后者没参数。前者的参数会覆盖webpack.config.js里的mode配置。
--open \"Chrome\"用谷歌浏览器显示网页内容,其中选项也可以在webpack.config.js中配置,就像webpack的mode选项一样,除了scripts内容项,其它的都是装模块(插件)的时候自动生成的
{
"name": "webpack_test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"build": "webpack --mode production",
"server": "webpack-dev-server --open \"Chrome\""
},
"author": "john",
"license": "ISC",
"description": "webpack_test",
"devDependencies": {
"babel-loader": "^7.1.4",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4"
}
}
至此,前端开发环境告一段落。接下来就是用vue.js实战前端开发。
时间有限,全栈工程师不容易,一步一个脚印,且行且珍惜。。。。。