什么是webpack？
webpack 是前端的一个项目构建工具，他是基于node.js开发出来的一个前端工具。
为什么要使用webpack?
1.网页加载速度慢，因为渲染一个页面需要发起很多二次请求。
2.处理复杂的依赖关系。
webpack解决了什么样的问题？
1.合并压缩精灵图图片转码，解决的网页加载速度慢的问题。
2.可以requireJs,也可以使用webpack解决了错综复杂的各个包依赖关系。
3.webpack可以把高级的、浏览器不识别的语法转为低级的浏览器识别的语法。
安装webpack
1.全局安装 cnpm i webpack -g
2.查看版本 webpack -v
3.打包命令 webpack 要打包文件的路径 打包输入的文件路径
也可以通过配置文件webpack.config.js配置打包路径
1.在项目目录中创建一个webpack.config.js文件，这个文件命名是固定。
2.代码如下：
const path =require("path"); //引入nodejs中的路径模块
module.exports={
entry：path.join(__dirname,"./src/main.js"),
output:{
path:path.join(__diname,"./dist"),
filename:"bundle.js"
}
}
3.执行命令：webpack
安装webpack的相关工具
1.安装webpack-dev-server自动打包编译的工具实现自动打包编译
安装命令：cnpm install webpack-dev-server -D (安装这个工具到项目本地)
执行命令：
1.在package.json（cnpm init可以初始化一个package.json文件）中的script对象中添加一行： "dev":"webpack-dev-server"
2.然后在cmd命令窗口执行cnpm dev即可执行自动打包编译
注意事项:
webpack-dev-server帮问哦们打包生成的bundle.js文件并没有存放到实际的物理磁盘上，而是以一种虚拟的形式托管到
项目根目录的虚拟磁盘上，这样是为了提高效率。打包完成后项目可以默认在localhost:8080端口访问，但是有一个问题，就是我们
每次打包完都要手机输入这个地址去访问，为了减少这种操作，可以配置打包完成后自动打开浏览器。我们可以这么做，就是在package.json
文件中script对象中添加一行："dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"就行。表示在本地3000端口下执行项目src目录下的文件
自动打包并热更新。
webpack中也提供了基于webpack开发很多的插件，每个插件的使用方法详情看官方文档
使用步骤：
1.安装插件 cnpm 插件名称
2.先要在配置文件webpack.config.js中最前面引入webpack
3.然后再引入webpack的插件
4.然后在配置文件中的plugins:[]这个节点中做相关配置
如：
1.打包html需要使用插件：npm install html-webpack-plugin --save-dev
使用步骤：
1.1 var HtmlWebpackPlugin = require('html-webpack-plugin');
1.2. plugins:[
new HtmlWebpackPlugin({
chunks:['app/dist/js/index'],
filename:'app/index.html',
template:'app/src/page/index.html'
})
]
2.打包压缩js的插件：cnpm install uglifyjs-webpack-plugin --save-dev
使用步骤：
1.1 const uglify = require('uglifyjs-webpack-plugin');
1.2 plugins:[
new uglify()
]
3.抽离生成css的插件：cnpm install extract-text-webpack-plugin --save-dev
使用步骤：
1.1 var ExtractTextPlugin = require("extract-text-webpack-plugin");
1.2 plugins:[
new ExtractTextPlugin({
//这里关键至极,filename:[name].[contenthash:5].css;之前我们项目是这样写的，这样写，打包出来的css就跑到dist/js里面去了，
// 虽然不影响使用，但是混到一起就是很不舒服，
//这里你们非常有必要先试试，filename:[name].[contenthash:5].css
//还有就是最外层建一个 css文件夹 ，然后这样配置filename:css/[name].[contenthash:5].css,然后看看具体打包出什么，
filename: (getPath)=>{
return getPath('[name].[contenthash:5].css').replace("js","css")
}
})
]
webpack中使用地第三方loader加载器如：
为什么要按使用loader加载器呢？因为webpack默认只能打包处理js文件，不能处理css、less等这样的文件，如果在webpack中使用css文件，就需要使用第三方加载器去编译这些css文件。
使用步骤：
1.安装 cnpm 加载器名称 -D
2.先要在配置文件webpack.config.js中最前面引入webpack
3.然后在配置文件中的module:{}这个节点中做相关配置，模块配置代码如下：
module：{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}， //这个loader可以处理.css文件
{test:/\.lesss$/,use:["style-loader","css-loader","less-loader"]}, //这个loader可以处理.less文件
{test:/\.scss$/,use:["style-loader","css-loader","scss-loader"]}, //这个loader可以处理.scss文件
{test:/\.(.jpg|png|gif|bmp|jpeg)$/,use:["url-loader?limit=3232&name="1"]}
//这个loader可以处理css中url引用的文件，可以传递参数，3232表示图片字节大小，
如果引用的图片大于给定的limit的值则不会转为base64,如果小于limit值，则转为base64格式。
name的值可以设置表示打包后图片的名字。为了防止图片重名，可以设置name的hash值如：name=[hash:6565]-[name].[ext]
]
}
4.注意事项：第三方加载器调用规则，从后往前依次调用，意思是先调用css-loader，把结果给上一个style-loader
最后给webpack打包输出。webpack 1.x版本中style-loader中的-可以不写，但是webpack 2.x和3.x中需要写。
还有就是webpack默认不能识别css、less、scss中的url(包括url引用的字体库和引用的图片等),所以也需要安装第三方
loader，还有一个webpack默认只能处理一部分es6的新语法，还有一些高级的ES6和ES7语法webpack是无法处理的，这时候
也要借助于第三方loader去处理，如安装Babel的相关步骤：
1.必须安装两套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D //babel的转化工具
cnpm i babel-preset-env babel-preset-stage-0 -D //babel的语法工具
2.在项目根目录中创建一个.babelrc的文件，配置如下：
{
"presets":["env","stage-0" ],
"plugins":[transform-runtime]
}
3.然后在wabpack.config.js中的moudle:{ rules:[{test:/\.js$/,use:"babel-loader" ,exclude:/node_moudles ]}}
这里加个exclude:/node_moudles ]表示防止node_moudles文件被编译了，用exclude排除他。
使用webpack和npm需要注意事项：
1.在.json文件中不能写注释，不然会报错。
2.注意本地安装和全局安装的区别，有时候要配置环境变量