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