webpack3.0使用

什么是webpack？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack可以做什么事情？？？
1.webpack可以处理js文件的相互依赖关系。
2.webpack能够处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能够有正常识别的语法。
webpack ./src/main.js ./dist/bundles.js
在项目根目录创建一个webpack.config.js
这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
webpack.config.js
const path=require（‘path’）
module.export={
在配置文件中需要手动指定入口和出口
entry：path.join（_dirname,’./src/mian.js’） //入口，标识要使用webpack打包哪个文件
output：{//输出文件的相关配置
path：path.join（—dirname,’./dist’），//指定打包好的文件，输出到哪个目录中去
filename：‘bundle.js’ //这是指定 输出文件的名称
}
}
//当我们在控制台，直接输入webpack命令执行的时候，webpack做了一下步骤
//1.首先webpack发现，我们并没有通过命令的形式，给他指定入口和出口
//2.webpack会去项目根目录中，查找一个叫做webpack.config.js为配置文件
//3.当找到配置文件后，webpack会去解析执行这个js文件，当解析执行完毕后就会得到配置文件中，导出的配置对象
//4.当webpack拿到配置对象之后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
webpack实现自动打包编译功能，使用 webpack-dev-server工具
1.运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖（项目中必须先安装webpack，cnpm i webpack -D）
2.安装完毕后，这个工具的用法和webpack命令的用法，完全一样
3.由于是在项目本地安装的webpack-dev-serve，所以无法把它当做脚本命令，在powershell终端中运行；（只有那些安装到全局-g的工具，才能在终端中正常执行，在package.json server中添加’dev’：webpack-dev-serve ，然后就可以运行npm run dev）
4.注意;webpack-dev-serve这个工具，如果想要正常的运行，要求在本地必须先安装webpack。
5.webpack-dev-serve帮我们打包生成的bubdle.js文件，并没有存放到实际的物理磁盘而是，直接托管到了电脑的内存中，所以我们在项目根目录中找不到这个打包好的bundle.js
6.我们可以认为，webpack-dev-serve把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist src node_modules平级，有一个看不见的文件叫做bundle.js
自动打开浏览器、设置端口、设置打开浏览器显示页面的根路径、热更新（浏览器自动刷新）
第一种:在package.josn中 推荐
‘dev’：‘webpack-dev-serve --open 3000 --contentBase src --hot’
第二种：在webpack.config.js中
const path=require（‘path’）
const webpack=require（‘webpack’） //启用热更新的第二步
module.export={
在配置文件中需要手动指定入口和出口
entry：path.join（_dirname,’./src/mian.js’） //入口，标识要使用webpack打包哪个文件
output：{//输出文件的相关配置
path：path.join（—dirname,’./dist’），//指定打包好的文件，输出到哪个目录中去
filename：‘bundle.js’ //这是指定 输出文件的名称
} ，
devServe：{
open：true，//自动打开浏览器
port：3000， //设置启动的时候的运行端口
contentBase：‘src’，指定托管的根目录
host：true， //启用热更新的第一步
}，
plugins：[//配置插件的节点
new webpack.HotModuleRePlacementPlugin（） //new 一个热更新的模块对象，这是启用热更新的第三步
]
}
在内存中生成HTML页面的插件
1.cnpm i html-webpack-plugin -D
const path=require（‘path’）
const webpack=require（‘webpack’） //启用热更新的第二步
webpack.config.js导入在内存中生成html页面的插件
所有的插件都要写在plugins中
这个插件的两个作用：
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js文件追加到页面当中
const htmlWebpackPlugin=require（‘html-webpack-plugin’）
module.export={
在配置文件中需要手动指定入口和出口
entry：path.join（_dirname,’./src/mian.js’） //入口，标识要使用webpack打包哪个文件
output：{//输出文件的相关配置
path：path.join（—dirname,’./dist’），//指定打包好的文件，输出到哪个目录中去
filename：‘bundle.js’ //这是指定 输出文件的名称
} ，
devServe：{
open：true，//自动打开浏览器
port：3000， //设置启动的时候的运行端口
contentBase：‘src’，指定托管的根目录
host：true， //启用热更新的第一步
}，
plugins：[//配置插件的节点
new webpack.HotModuleRePlacementPlugin（）， //new 一个热更新的模块对象，这是启用热更新的第三步
new htmlWebpackPlugin（{
template：path.join（_dirname，’./src/index.html’），// 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename：‘index.html’，//指定生成的页面的名称
}）
]
}
loader加载器
注意：webpack，默认只能打包处理js类型文件，无法处理其他非js类型的文件；
//如果非要处理一些非js类型的文件，我们需要手动安装一些合适的第三方loader加载器；
1.如果想要打包处理css文件，需要安装 cnpm i style-loader css-loader -D
2.打开webpack.config.js在里面新增一个配置节点，叫做module，他是一个对象；在这个module对象身上，有个rules属性，是个数组，这个数组中，存放了，所有第三方文件的匹配和存放规则；

	const path=require（‘path’）
const webpack=require（'webpack'）  //启用热更新的第二步
webpack.config.js导入在内存中生成html页面的插件
所有的插件都要写在plugins中
这个插件的两个作用：
	1.自动在内存中根据指定页面生成一个内存的页面
	2.自动把打包好的bundle.js文件追加到页面当中
const htmlWebpackPlugin=require（'html-webpack-plugin'）

module.export={
在配置文件中需要手动指定入口和出口
entry：path.join（_dirname,’./src/mian.js’） //入口，标识要使用webpack打包哪个文件
output：{//输出文件的相关配置
path：path.join（—dirname,’./dist’），//指定打包好的文件，输出到哪个目录中去
filename：‘bundle.js’ //这是指定 输出文件的名称
} ，
devServe：{
open：true，//自动打开浏览器
port：3000， //设置启动的时候的运行端口
contentBase：‘src’，指定托管的根目录
host：true， //启用热更新的第一步
}，
plugins：[//配置插件的节点
new webpack.HotModuleRePlacementPlugin（）， //new 一个热更新的模块对象，这是启用热更新的第三步
new htmlWebpackPlugin（{
template：path.join（_dirname，’./src/index.html’），// 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename：‘index.html’，//指定生成的页面的名称
}）
]，
module：{ //这个节点用于配置所有第三方模块加载器
rules：[ //所有第三方模块的匹配规则
{test：/.cssKaTeX parse error: Expected 'EOF', got '}' at position 39: …css-loader'] }̲ ，//配置处理.css文件的…/，use：‘url-loader’ }
]
}
}
//注意 webpack处理第三方文件类型的过程：
//1.发现这个要处理的文件不是js文件，然后就去配置文件中查找有没有对应的第三方loader规则
//2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；
//3.在调用loader的时候，是从后往前调用的；
//4.当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去