webpack自动打包功能配置
2020-06-05 05:16
127 查看
当我们在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 接口停止自动打包功能
相关文章推荐
- 10.webpack-配置webpack的自动打包功能
- 12.webpack-配置自动打包相关的参数
- webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源
- webpack自动打包配置
- webpack打包到线上配置去掉console
- 前端自动打包工具webpack的安装和使用
- webpack基本配置及打包操作
- webpack配置--打包
- webpack第三天/多页面打包/ 配置source-map/watch的用法/小插件 plugins:/webpack 跨域/resolve/定义环境变量/区分不同的环境
- vue vue-cli webpack打包部署上线前的配置操作,初建vue项目 webpack打包需要注意的配置
- vue-cli3.0的webpack常用配置(跨域、修改入口文件、打包路径为绝对路径)
- 使用webpack打包的后,公共请求路径的配置问题
- webpack中loader加载器配置postCss自动添加CSS兼容前缀
- webpack自动打包和热更新的实现方法
- webpack 自动发现 entry 的配置和引用方式
- webpack 快速打包配置
- 使用webpack打包的后,公共请求路径的配置问题
- webpack打包生成多个vendor的配置方法
- 前端工程化--webpack4.x的基本配置--打包基本资源、ES6转换、热更新
- 使用webpack打包的后,公共请求路径的配置问题