webpack-dev-server的基本使用

 webpack-dev-server是一个轻量级的服务器，修改文件源码后，自动刷新页面将修改同步到页面上

• webpack以 npm i [email protected] -D 的形式安装到项目下
• webpack-cli以 npm i [email protected] -D 的形式安装到项目下
• webpack-dev-server以 npm i [email protected] -D 的形式安装到项目下
• 在package.json文件中的devDependencies属性就会显示你的webpack版本信息。
• 然后在package.json中的script标签中手动加入"dev":"webpack-dev-server"

•  在项目根目录下手写webpack.config.js配置文件

• 在命令窗口中使用 npm run dev 来启动 webpack-dev-server，此启动方式会将项目作为一个服务器，分配得到一个端口，在浏览器中输入此端口即可查看里面文件

 

 点击src可以打开index页面

• 此时在main.js标签的修改保存后会使得bundles.js（只在内存中！！）即时重新编译

 

• 但是你在访问index页面时候并不会看到页面有何变化！

• 因为此时的bundle.js其实像是个幽灵，在根目录下才能访问的到。

• 在浏览器地址根目录输入"/bundle.js",则会显示随main.js热更新的，保存在内存中的，相当于跟src，dist目录平级的bundle.js文件，这个才是main.js修改保存后影响到的真正的文件。

 所以要想页面能看到更新后的变化，就需要修改script标签引入的bundles.js文件的地址，将其改为根目录下的bundles.js文件

 

• 这样修改了main.js文件后就会重新编译，然后使得页面发生变化了。

 总结

webpack-dev-server 的常用命令参数，注意，JSON文件中不能写注释！

 

参考链接：webpack 中版本兼容性问题错误总结 

webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server