webpack2-----webpack-dev-server


上回书我们说了些webpack的初期配置,到了最后我们精简到一个webpack命令就可以把一个main.js文件编译成浏览器支持的bundle.js文件。那我们的欲望是无情无尽的。其实webpack还是不能满足我们这群懒猪。我们其实想更方便,不用敲击命令让他直接编译。哈哈,这期我们就满足你们的欲望,欢迎大家来到 webpack-dev-server篇

命令行 npm i webpack-dev-server -D 回车


安装过后出现了很多警告,也不知成功没成功,先试试吧!

命令行敲击webpack-dev-server,结果不行

还需要本地安装,我们打开package.json,修改Dev的值


然后 npm run dev 结果报一堆错


把node-modules都删掉 然后 打开package.json,把该删的都删了,改的都改了。


然后 cnpm i 回车

然后重新安装webpack-dev-server( npm i webpack-dev-server -D)

然后本地安装webpack (cnpm i webpack -D)

再把package.json打开 把dev改回去

最后npm run dev刷新

(以上步奏均无报错)

结果···


缺少了webpack-cli 插件

cnpm i webpack-cli 安装一个呗

然后 cnpm i jquery 重新安装

最后npm run dev

如果还是报错,就才删node-modules再来一遍。第二次 我们成功了


这回我们就不能直接文件打开了,要通过webpack-dev-server创建的服务器打开


点击网址进入(另外)

记得把src改成src=‘/bundle’。应为HTML引入的是服务器的bundle.js 不是一样的

然后进入浏览器界面


点击src,网页就出来了啦!以后再在webstorm修改,直接切到浏览器界面就看见变化啦!

下面我们再看一些webpack-dev-server的常用配置

打开package.json文件


--open:自动打开浏览器

--port 8888:自动设置端口号

--contentBase src:设置src为项目根路径

--hot:热重载(不用每次更改都加载整个文件,而是打了几个补丁,加进去即可,节约内存)

好了,讲完了,下节我们讨论html-webpack-plugin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容