webpack-开发服务器

每次修改代码, 重新打包, 才能看到最新的效果

实际工作中, 打包非常费时 (10-30s) 之间, 影响开发效率

1. 构建入口和所有模块依赖关系图

2. 磁盘读取对应的文件到内存, 才能加载

3. 用对应的 loader 进行处理和翻译

4. 将处理完的内容, 输出到磁盘指定文件内

5. 以后代码变化, 从1重新开始

下载webpack-dev-server, 启动一个开发服务器, 用于快速开发应用程序

下载包

yarn add webpack-dev-server@3.11.2 -D

配置自定义命令serve

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

运行命令 启动开发服务器

yarn serve

 然后

会给一个 http://localhost:8080/

webpack-开发服务器-配置

正常工作中,肯定不会希望一直是默认的 8080端口  

下面教下大家修改端口webpack.config.js中添加服务器配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

然后重新运行开发服务器看看效果

开发服务器运行期间,修改打包前的文件内容他会自动跟随改变 例如你把li的颜色修改以下

他就会自动将打包文件更新改变.

webpack-项目打包发布

开发中,如果项目完成了 ,该怎么做.

执行之前的yarn build产生dist目录

所有代码, 被整合打包

把dist目录交给后台/运维, 部署给客户使用即可

开发环境的代码不用发

把这个发给客户   你不能把你的底层代码发给客户-0 -  不然你咋赚钱哈~~