文章目录
1、webpack 及webpack-dev-server安装
1.1 npm常用命令解释
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象
npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象
npm i module_name -g 全局安装
i 是install 的简写
2、安装步骤
2.1 webpack安装版本
npm i webpack@3.8.1 -g
2.2 webpack-dev-server 安装版本
npm i webpack-dev-server@2.9.2 -D
直接安装完webpack-dev-server后会出现如下警告
这是因为webpack是全局安装的,在本地安装webpack-dev-server后会不识别已经安装的webpack,因此还需要在本地再安装一次webpack
2.3 再次安装本地项目的webpack
npm i webpack@3.8.1 -D
此时如果直接输入命令webpack-dev-server则会提示
因为只有全局安装的命令才会直接在控制台输入命令,这样的方式提示不是内部命令也很正常。所以需要在package.json的scripts标签下配置“dev”:“webpack-dev-server”,通过这样的方式来运行webpack-dev-server命令
2.4 配置package.json的dev
命令含义
-- webpack-dev-server:指定打包插件
-- open:打包后自动打开浏览器
-- contentBase src :指定首页打开的***.html文件在哪个目录下
-- hot:自动编译是热编译