webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步到页面上
- webpack以 npm i webpack@3.8.1 -D 的形式安装到项目下
- webpack-cli以 npm i webpack-cli@3.0.0 -D 的形式安装到项目下
- webpack-dev-server以 npm i webpack-dev-server@2.9.3 -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 中版本兼容性问题错误总结