1. 使用封装好的webpack打包：npm run dev
vue是单页面应用首次加载很大，首屏优化
①路由懒加载：将网页拆分成多个组件，引入那个组件便加载那个路由
说明:打包时不将路由文件加载到 app.js
实现：var foo = () => import('./foo.vue')
②cdn引入第三方包
③按需引入
2. 自己使用webpack打包
原理：一入口文件为主依次打包所有入口文件引用的文件
准备工作：
创建文件夹；
初始化package.json（npm init）
创建index.html
添加main.js入口文件（在入口文件中 引入calc.js文件：import xx from './xx' 将会出错，出错原因：浏览器环境不支持模块化=不支持import，只有node才支持。在calc.js中使用export default 将calc.js导出）
添加包含js的文件夹（calc.js）
解决
webpack默认功能，将模块化的js文件文件进行打包，从而在浏览器运行
loader打包其他资源（css/font/img）
①全局安装webpack： npm i webpack ---save-dev
②找到package.json中script属性添加 scripts:{ 'build' : 'webpack ./src/mainjs} 入口文件
③使用npm run dev
配置文件：
webpack打包时有很多参数可以通过配置项进行设置，这个设置在根目录webpack.config.js中
1. 入口文件： entry: './src/main.js'
2. 出口：
output:{
path: path.resolve(__dirname, 'dist' )
filename: 'index.js'
}
3. 配置项目模式：
mode：
production：生成模式（打包的代码会压缩）
development：开发模式（打包的代码不会压缩）
打包css文件
在入口文件中引入css文件，因为打包是从入口文件依次打包被引入额文件
①下载对应的lodar
②配置（文档→指南→资源）
4. 省略后缀名
resolve:{
extensions['.js', '.css', '.less'], //省略后缀名
alias: { '@': path.resolve(__dirname, 'src' ) } //用@代替src
5. 配置映射（记得打包代码的行数）
devtool: 'source-map'
插件
HtmlWebpackPlugin：自动在打包目录下生成.html文件
clearWebpackPlugin：打包文件时自动清除以前打包的dist文件
webpack-dev-serve：将项目以服务器形式运行
vue-loader：打包vue组件