01-webpack概念：
webpack是一个构建工具，在开发中，我们会使用到很多的插件，比如es6转为浏览器能识别的js，比如less，sass，stylus，转为浏览器能运行的css文件，以及其他种种的图片文件。类似于上述的一些插件统一集中管理的工具就是webpack
02-webpack五个概念：
1：Entry：
入口【entry】图示webpack以哪个文件为入口打包为起点开始打包，分析构建内部依赖图。
2：output
输出output提示webpack打包后的资源bundles输出到哪里去，以及如何命名
3：loader
laoder可以让webpack能够处理那些非javascript文件，webpack自身只理解JavaScript
4：Plugins
插件（plugins）可以用于执行范围更为广泛地任务，插件的范围包括从打包优化和压缩，到一直重新定义环境中的变量等等。
5：mode
mode意思是指示webpack使用响应模式的配置。
development：能让代码在本地测试环境运行的环境。
production：能让代码在线上运行的环境
03-webpack初体验：
1：首先新建一个空文件加，输入npm init -y
作用：初始化package.json
2：下载并安装webpack
npm install webpack webpack-cli -g(全局安装webpack)
npm install webpack webpack-cli -d （把webpack添加到生产依赖中）
3:运行指令：
开发环境：
03-webpack初体验：
1：首先新建一个空文件加，输入npm init -y
作用：初始化package.json
2：下载并安装webpack
npm install webpack webpack-cli -g(全局安装webpack)
npm install webpack webpack-cli -d （把webpack添加到生产依赖中）
3:运行指令：
开发环境：
上述代码的意思是从./src/index.js为入口，./build为出口进行打包，打包环境为开发环境
运行成功的截图为：
生产环境：
上述代码的意思是从./src/index.js为入口，./build为出口进行打包，打包环境为生产环境。和上述的不同是，这个打包后的文件进行了压缩，整体体积比较小
运行成功的截图为：
4：结论
webpack可以编译打包js和json文件，
能将es6模块化语法转化为浏览器能够识别的语法，能够压缩代码
04-webpack打包样式资源
- 步骤：
1：弄好文件夹以后先新建一个webpack.config.js文件
在webpack.config.js中配置文件
/*
webpack.config.js webpack 的配置文件
作用：指示webpack干哪些活
所有的构建工具都是node.js平台运行的，所以模块化语言默认采用的common.js
*/
const { resolve } = require('path');
module.exports = {
//webpack基础配置
// 入口文件
entry: './src/index.js',
// 输出出口文件
output: {
//输出文件名
filename: 'main.js',
//输出路径
// __dirname nodejs的一个常量，代表当前文件目录的绝对路径
path: resolve(__dirname, 'build')
},
// laoder配置
module: {
rules: [
// 详细的loader配置
{
// 匹配那些文件
test: /\.css$/,
use: [
//创建style标签，将js中的样式资源进行插入，添加到head中生效
'style-loader',
//将css文件变成common.js模块,加载到js中，里面都是样式字符串
'css-loader'
//use中运行顺序是从右到左，从下往上。依次执行
]
},
{
// 匹配那些文件
test: /\.less$/,
use: [
//创建style标签，将js中的样式资源进行插入，添加到head中生效
'style-loader',
//将css文件变成common.js模块,加载到js中，里面都是样式字符串
'css-loader',
'less-loader'
//use中运行顺序是从右到左，从下往上。依次执行
]
}
]
},
plugins: [
//详细的插件配置
],
mode: 'development',//开发模式
// mode:'production' //运行模式
}
2:npm init -y 生成配置文件
3:安装webpack
npm install webpack webpack-cli -d （把webpack添加到生产依赖中）
npm install webpack webpack-cli -g （把webpack添加到运行模式中）
4：安装less，style-loader，css-loader
npm install less --save-dev
npm install style-loader css-loader -D
5:运行webpack
05-webpack打包html文件
这个部分涉及插件的使用，插件的使用步骤是先下载，再引入，最后在plugin中使用，使用的时候默认引入所有的打包资源，包含js文件和css文件
使用步骤：
1：下载安装plugin包
npm install --save-dev html-webpack-plugin
2:在vue.config.js中引入
3：在plugin中去使用
06-打包图片资源
1：首先下载loader
npm install --save-dev html-loader url-loader file-loader
用于处理在css引入图片用的loader，不可用于在在html文件中引入的images文件
2：在配置loader的地方配置文件
{
// 匹配那些文件
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options:{
//图片小于8kb，就会被base64给处理
//优点：较少请求数量，（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度慢）
limit:8*1024,
name:'images/[name]-[hash:8].[ext]',
// // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
// // 解析时会出现问题:[object Module]
// // 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule:false,
// //给图片进行重命名
// // [hash:10]取图片的hash的前10位
// // [ext]取文件原来扩展名
// name:'[hash:10].[ext]'
}
},
07-打包其他资源
上述代码表示的意思是除了css/js/html/less文件以外的文件使用file-loader插件来处理
08-开发服务器devserver
开发服务器devServer用来自动化，（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存编译中进行打包，不会有任何的输出
启动devServer的指令为webpack-dev-server
需要安装下载一个包npm i webpack-dev-server-D
devServer:{
// 项目构建后的路径
contentBase:resolve(__dirname,'build'),
//启动gzip压缩
compress:true,
//端口号
port:3000,
//自动打开浏览器
open:true
}
