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访问路径。