webpack4的学习记录

1、打包命令 webpack --mode development

webpck --mode devlopment
--mode指打包环境 后面有三个参数,development、production、none分别指开发环境、生产环境和无。 默认production,打包后的js文件是压缩文件。
在这里插入图片描述
webpack --mode development 如果不指定入口文件和打包后的文件名称,打包时会默认去src目录下找index.js文件然后生成dist目录将打包结果文件命名为main.js

2、webpack --mode development --watch实现自动打包

webpack --mode development会自动监听入口文件的变化,并自动打包。
在这里插入图片描述

3、使用webpack-dev-server实现自动打包和浏览器自动刷新

安装npm install webpack-dev-server -D
使用webpack-dev-server推荐设置webpack.config.js来定义要打包的文件
webpack.config.js
在这里插入图片描述
在这里插入图片描述

这里要注意最后生成的打包文件并不在dist目录下,而是存在于内存中,通过./bundle.js来引用,即当前目录下。
在这里插入图片描述
浏览器打开
在这里插入图片描述

这样每当index.js中的内容发生改变后,都会自动打包并刷新浏览器。
如果你不想修改index.html, 可以在webpack.config.js中output处增加热更新的url访问路径。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_39786582/article/details/83861295