webpack-dev-server自动打包编译的使用

webpack-dev-server是什么？

   webpack-dev-server是基于webpack的一项本地环境搭建工具，它会默认创建一个server来实现你需要的功能。

webpack-dev-server能做什么？

   webpack-dev-server能解决跨域问题，实现自动打包编译文件，解放双手！

webpack-dev-server怎么用？？

  1、安装

    我们一定要先安装webpack，再安装webpack-dev-server，不然会报错。

     npm i webpack-dev-server -g

   2、配置

     2.1、package.json配置

        我们在package.json中的"script":{....}中定义

        "dev":{webpack-dev-server  --open  --port 3000  --contentBase src  --hot}

         open---自动打开浏览器，port---设置端口号，contentBase src设置打开后的根目录，hot--更新会以补丁的形式，实现无刷新重载，减少http请求，也叫热更新，热加载。 

      使用时，只需要：npm run dev即可

   2.2、在webpack.config.js中配置

首先仍是在package.json中的"script":{...}中设置：

"dev":"webpack-dev-server"

接着在webpack.config.json中设置：

devServer:{

open:true,  //自动打开浏览器
contentBase:'src',  //设置托管目录
port:3000,  //设置端口
hot:true  //启动热更新

}

 

 

3、使用

输入  npm run dev  

观看上面的信息得知，项目运行的地址是:http://localhost:3000/  ，webpack的输出文件托管到根路径中（实际上应该是打包生成的文件，在根路径中）。

  在需要用到打包文件的html或.js文件下，将打包文件的路径改为  /打包文件.js 

  举个例子，之前的打包文件是存放在./dist/bundle.js中，使用了npm run dev之后就需要改成 /bundle.js

  因为webpack-dev-server 生成的打包文件是在内存中的根目录下，跟src、dist、node_moudle平级，而且你是看不到它的，当我们调试完项目之后，再手动使用webpack打包就完成了！！