webpack自动打包功能配置

当我们在js中修改后，在浏览器打开html文件并没有任何变化，这是因为引入的js文件是之前打包的js文件，如果要实现修改后的js有变化，需要在重新打包一次，这样就大大的增加了我们的工作量，所以这儿就用到了webpack配置自动打包功能。
这儿我用vscode为编辑器

第一步：vscode终端，在项目根目录中，运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具。
第二步：修改package.json -> scripts 中的start命令如下(注意这儿的start可以自己起一个名字):
第三步：将src -> index.html 中，script 脚本的引用路径，修改为"/button.js"
这儿引用了上面那个地址修改成“button.js”
第四步：终端运行 npm run start 打包
第五步：在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

当我们在index.js中修改成蓝色，再次查看效果

这样就完成了自动打包的配置
注意:
●webpack -dev-server会启动一个实时打包的http 服务器
●webpack-dev-server
打包生成的输出文件,默认放到了项目根目录中，而且是虚拟的、看不见的

在vscode中要停止自动打包，使用ctrl+c快捷键，选择 Y 接口停止自动打包功能

webpack自动打包功能配置相关推荐

webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能
配置打包的入口与出口 const path = require('path') // 导入 node.js 中专门操作路径的模块 module.exports = { entry: path.join ...
jira邮件自动提醒功能配置
本文转自 Bruceweien 51CTO博客,原文链接: http://blog.51cto.com/bruceweien/1932395 1.开启Jelly Runner功能,点击administ ...
Jenkins + GitLab + CocoaPod 的自动打包平台配置（从build到export success）
目录 1. 安装JAVA环境 2. 安装Jenkins 3. 管理插件 4. 项目新建和设置 5. Keychains and Provisioning Profiles Management配置(重 ...
webpack预览页面配置
应用场景:当我们配置了webpack自动打包工具后,通过 http://localhost:8080/ 访问到的是文件夹根目录,而没有直接打开html页面,如果要打开html页面需要在界面中点击指定的 ...
Jenkins打包之本地远程自动打包教程
1.安装Jenkins 点击进入下载Jenkins 如下图: 点击Download,跳转到下面页面,个人建议用安装包安装简单,安装后直接在浏览器输入地址:http://localhost:8080即可 ...
ios 自动打包命令_iOS Xcode 自动打包，一键上传AppStore脚本
#!/bin/sh # 使用方法 # 1.将autoarchive.sh和附件中的plist,放在一起,新建文件夹为Shell,将这几文件复制进去,然后复制Shell文件夹到工程的根目录 # 2.终端 ...
webpack配置：打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源...
一.打包第三方类库下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...
jenkins android md5,Jenkins配置自动打包 -- 遇到的坑
1.把gradle路径设为本地路径 Jenkins部署在远程linux服务器上,使用git将代码下载到服务器路径下后,无法使用gradle命令因为默认配置都是gradle同步时实时从网上下载,进入 ...
配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数
配置 html-webpack-plugin 生成预览页面 ① 运行 npm install html-webpack-plugin –D 命令,安装生成预览页面的插件 ② 修改 webpack.co ...

webpack自动打包功能配置

webpack自动打包功能配置相关推荐

最新文章

热门文章