webpack基本使用

step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 packagejson

或者：

step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jqueryjs)，只引入项目js入口文件( mainjs ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpackconfigjs ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 packagejson 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：
执行上述命令后终端会有类似信息输出：
Project is running at >默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendorsjs文件中，会导致该js文件过大，加载速度很慢。
我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendorsjs文件中，而是需要加载时去请求cdn资源。
vueconfigjs里面配置configureWebpack，配置externals

这样完成后，再次打包，js文件会大大变小，加载速度非常棒。

使用vue-lazyload包，实现资源懒加载，组件懒加载

---