window下安装webpack以及webpack-dev-server使用

前言

条条大道通罗马,这是我的安装和使用方式。很多博客写的又是介绍又是这那的,巴拉巴拉一大堆,我就是想先安装它,安装都不成功,谈何使用?不废话直接介绍安装过程。补一条阮一峰老师的demo地址: https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 补一条好的前端博客网址:http://www.css88.com/

准备工作

1)安装node.js 链接: https://pan.baidu.com/s/1k92tNm5I3s_gzIXRCDRIFA 密码: ev2t

保持各个依赖之间版本一致 尽量用我提供的版本下载

2)安装git window版 链接: https://pan.baidu.com/s/1bNCduQ3OqEgybLAInDmuHw 密码: k8q6

备注:第二步安装git对我来说只是想在windows下用linux命令而已。用其中的git-bash功能。

安装

新建一个前端项目的文件夹 cd进去 执行npm init//初始化

npm uninstall webpack -g （全局卸载,防止之前有安装错误）

npm install -g cnpm --registry=https://registry.npm.taobao.org（安装了淘宝npm镜像增加下载速度 这一步可省略 用淘宝npm后反而安装失败 暂时没找到原因 先跳过）

npm install -g webpack@1.15.0(全局安装 )

npm install --save-dev webpack@1.15.0(cd到你的项目里面,局部安装 )

npm install webpack-dev-server@1.16.5 -g

npm install webpack-dev-server@1.16.5 --save-dev

补充:到阮一峰老师上下载一个demo下来

webpack-dev-server --inline --port 8088//执行命令

http://127.0.0.1:8088/ 浏览器输入进去

改成888888

浏览器不需要刷新自动变了 大大提高开发效率

webpack 支持自定义命令 可以在package.json中将上面冗长命令放进去 然后npm start直接启动即可。

验证

在项目目录创建两个文件 其中index.js引用cats.js

git-bash下输入 webpack ./src/page/index/index.js ./dist/app.js

打包成功