webpack总结 理解就行，用时再查官方文档

概述

web开发不友好现状：
文件依赖关系错综复杂；
静态资源请求效率低；
模块化支持不友好；
浏览器对高级js兼容性问题；
…
webpack解决以上的前端项目构建工具（打包工具），提供友好的模块化支持，以及代码压缩混淆，处理js兼容，优化性能。

理解即可，脚手架中不需要自己搞。

安装配置

1、安装相关包,vue在建项目的时候就已经全套弄好了
npm install webpack webpack-cli -D
2、在项目根目录中，创建webpack.config.js的配置文件
3、在2文件中初始化相关配置:
	module.exports = {
		mode:'development'//编译模式，用来指定构建模式
	}
	development 开发阶段，开发模式转换出来的代码不会进行压缩混淆,转换速度会快
	production  项目上线阶段，产品发布模式，会对转换出来的代码进行压缩混淆，转换时间增长
4、package.json中找到scripts节点，新增dev脚本
	"scripts":{
		"dev":"webpack"//通过npm run执行
	}
5、npm run dev启动项目打包

配置打包的入口以及出口

入口文件：src => index.js
出口文件：dist => main.js

修改打包入口与出口，在webpack.config.js中新增如下：

const path = require('path');//导入node.js中专门操作路劲的模块
module.exports = {
	entry: path.join(__dirname,'./**/index.js'),//打包入口文件（绝对）路径
	output: {
		path: path.join(__dirname,'自定义路径？'),//输出文件存放（绝对）路径
		filename: '输出文件名称，如bundle.js'
	}
}

配置自动打包功能

页面引入的是打包后的js文件，每一次修改代码后需要运行一次执行命令，麻烦！

1、运行 npm install webpack-dev-server -D,安装支持项目自动打包工具
2、修改package.json -> scripts节点下dev命令：
	"scripts":{
		"dev": "webpack-dev-server"
	}
3、将src -> index.html 中，script脚本引用路径，改为!!根目录!!下 “bundle.js”(指定路径文件)
4、npm run dev 重新打包
5、访问http://localhost:8080即可

终端输出如下：

webpack输出被托管与localhost根路径中

基本使用

1、 npm install html-webpack-plugin -D ,安装生成预览页面的插件
2、修改webpack.config.js文件头部区域，添加配置信息：
	//导入生成预览页面的插件，得到一个构造函数
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const htmlPlugin = new HtmlWebpackPlugin({//创建插件实例对象
		templete:'./src/index.html',//指定要用到的模板文件
		filename:'index.html'//指定生成文件名称，在目录中不会直接显示
	})
3、webpack.config.js文件中新增节点内容：
	modules.exports = {
		plugins: [htmlPlugin] 
	}

打包

//package.json中scripts节点下新增一个build指令
"scripts":{
	"build": "webpack-p",
	"dev": "webpack-dev-server --open --host 127.0.0.1 port 3000",
}