webpack配置

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组件