js webpack 配置路径_Vue.js学习No.5(WebPack配置二)

学习的内容如下
开始
当我们需要频繁的修改main.js
我们每次都需要去构建，这样显得很麻烦，webpack .srcmain.js -o .distbundle.js，通过配置文件去配置每次的打包入口和出口
1、创建webpack.config.js

2、输入webpack 就可以直接打包

3、生成相对应的文件

当我们在控制台直接输入webpack命令执行的时候，webpack做了几个步骤
1、没有使用webpack 指定入口和出口
2、webpack 就会去项目中的根目录中，找一个webpack.config.js的配置文件
3、当找到了这个配置文件后，webpack就回去执行这个配置文件，解析执行完配置文件后，就得到了配置文件，导出配置对象
4、当webpack拿到配置对象了，就拿到了配置文件中入口和出口，然后进行打包和构建
使用webpack-dev-server工具实现自动的打包编译的功能
1、运行npm i webpack -dev -server -D安装工具

2、用法和webpack一样
3、由于在本地安装的，所以无法使用脚本命令，只能安装到全局-g才能正常的使用

4、脚本命令
在pcakage.json中添加"dev": "webpack-dev-server"

5、然后就可以在终端输入命令npm run dev

h:20190305codewebpack>npm run dev> yes@1.0.0 dev h:20190305codewebpack> webpack-dev-serveri ｢wds｣: Project is running at http://localhost:8080/i ｢wds｣: webpack output is served from /i ｢wdm｣: Hash: 8b5966bb4652f34f42c7Version: webpack 4.30.0

6、打开本地浏览器 http://localhost:8080/，然后就可以看到,说明打包成功了

7、注意点，当我们改变main.js中的内容，并且保存的时候，我们就可以自动的打包
8、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中

打开根路径的bundle，打包成的服务器的地址，项目中找不到，但是可以自动打包

9、可以认为这个webpack-dev-server工具，以一种虚拟的形式托管到了项目的根目录中，虽然看不到，但是可以认为和dist 平级的文件，为啥是这样做呢，原因就是快。速度快
webpack-dev-server工具常用的参数一

配置端口号和自动打开浏览器："dev": "webpack-dev-server --open --port 3000"

--contentBase src 可以自动的打开 index.html的文件，而不用去重新选择 src

--hot 可以实现浏览器无刷新的重载，修改完样式，页面根本没有刷新，但是能够重新加载最新的代码
·"dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"
完整的结果

webpack-dev-server工具常用的参数二
这样配置和上面的效果一样

最终的效果图

js webpack 配置路径_Vue.js学习No.5(WebPack配置二)相关推荐

js webpack 配置路径_vue使用webpack配置路径别名
原始的文件引用方式的缺点要拼写一个巨长无比的字符串,而且每引用一次都要拼写一次. 如果这个文件位置变了,我就要把所有引用它的文件都修改一次. 下面介绍一种很优雅的方式,使用webpack的resolv ...
js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片一.安装在vue cli3中创建项目时勾选这个组件就可以了或者手动安装 npm install store --sav ...
vue webpack压缩代码_vue.js - 解决vue-cli打包后自动压缩代码
当我们用vue脚手架做完项目后,npm run build打包之后, 有没有查看源码,全是压缩好的.但是我就不想让它压缩,该怎么办呢? 困惑了几天,查了各种资料.终于终于... 来,上干货: 首先,我 ...
vue获取上传图片的名字和路径_vue.js,_vue 上传图片路径不对，vue.js - phpStudy
vue 上传图片路径不对在网上找了个图片上传的示例,然后拉到vue2.0的项目中图片加载不出来,src=0,这是为什么选择图片添加图片移除全部图片上传 import { Cell } fro ...
vue.js 删除指定元素_vue.js删除动态绑定的radio的指定项
上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: " " + "{{option.text}}&q ...
vue js时分秒计时器_Vue js框架的倒数计时器
vue js时分秒计时器 VUE倒计时 (vue-count-down-timer) This is a count down timer for Vue js framework. This lib ...
vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...
本文只用于记录经验,为节省时间用于举例的UI也许有点简陋. 1.导出json文件安装file-saver 使用 npm install file-saver --save 安装 file-saver ...
js获取传统节假日_vue js moment.js 过滤了双休日和法定节假日
源码:注!原创的!!!! change {{p}} import moment from "moment"; //设置时间核心插件语言 moment.locale("zh ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...

js webpack 配置路径_Vue.js学习No.5(WebPack配置二)

js webpack 配置路径_Vue.js学习No.5(WebPack配置二)相关推荐

最新文章

热门文章