webpack系列---webpack-dev-server

上一篇文章我们介绍了webpack的基本使用，但我们每次打包都要运行下webpack很是麻烦，有没有一种办法使得自动监控，自动打包，我们只需ctrl s就行了？

通过webpack-dev-server可实现我们的需求，他会自动帮我们监控代码并完成打包

如何使用？

1.将webpack-dev-server安装到项目本地依赖安装cnpm提高下载速度 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm i webpack-dev-server -D

2.在package.json配置命令

这样我们在命令框输入 npm run dev 即可执行webpack-dev-server

运行发现报错，Cannot find module 'webpack' 这是因为webpack-dev-server依赖webpack并且强制我们项目本地安装webpack，虽然我们之前全局安装过webpack但是项目依赖并没有所有我们执行cnpm i webpack -D

安装完成再次运行

提示我们安装webpack-cli cnpm i webpack-cli -D

安装完成再次运行

可以看到项目运行在localhost:8080端口,地址栏键入如下即可打开index.html http://localhost:8080/src/

我们修改js代码将偶数行改为绿色

代码语言：javascript复制

import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor','green')
    $('li:even').cs('backgroundColor','gray')
})

浏览器打开发现并没有改变颜色

这里的自动编译没有问题，那问题是出在哪里呢？在我们的index.html有这样一段代码 <script type="text/javascript" src='../dist/bundle.js'></script>

这是以文件的方式引入的，而webpack打包后的bundle.js存放在网站项目根目录

所以我们要引入网站根目录的bundle.js <script type="text/javascript" src='/bundle.js'></script> 成功运行到浏览器

但是我们的项目文件夹并没有bundle.js weback-dev-server帮我们打包生成的bundle.js文件并没有存放在实际的物理磁盘上，而是直接托管到了电脑内存中。因为内存读取速度快，打包也快

打包完成自动打开浏览器 虽然自动监控打包已经很方便了，但是我们还想得寸进尺，我们希望在打包完成后边自动打开刷新浏览器

在package.json中修改配置

—open:自动打开 —port:自定义端口 —contentBase src 内容根路径

—hot:热更新，使得浏览器页面无刷新，每次只更新部分修改代码，提高效率

0 人点赞