vue webpack 自动打开页面_vue中webpack技术详解

1.为什么要使用webpack：

因为我们想把资源整合。如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源，而index.html里引用它就可以了)，但main.js里可能有些语法太高级了或用引入了其它js文件，所以会报错。这时候我们就可以使用weboack来处理main.js了(前提已全局安装了webpack。全局安装：npm i webpack)。

2. webpack处理main.js正常运行项目：

2.1 处理main.js：可以使用 webpack .\src\main.js .\dist\bundle.js (意思是处理main.js文件处理好了之后把它打包为bundle.js，此时index.html引用 .\dist\bundle.js 就可以了，如果根目录里没有dist文件将会自动生成)这样我们就可以每次修改一下main.js文件就执行一下 webpack .\src\main.js .\dist\bundle.js (重新处理main.js并重新打包为bundle.js )然后我们再刷新一下浏览器，不过这样太麻烦了。

2.2 简约方式处理main.js(目标：我们修改完main.js之后终端执行一下webpack就自动处理并打包)：这时我们需要在当前目录(一般是根目录)下新建一个webpack.config.js文件再里面配置需处理的文件路径及处理好之后打包的文件路径：

现在我们修改完main.js保存之后终端执行webpack再刷新一下浏览器即可看到效果

2.3 更简约方式处理main.js(目标：我们修改完main.js之后它自动处理并打包并自动刷新一下浏览器)：这时候webpack已经不能满足我们的