webpack 及webpack-dev-server安装

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:自动编译是热编译