什么是Webpack-----模块打包工具
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
1.webpack的安装：
//全局安装
npm install -g webpack
使用： webpack 入口文件名
//安装到你的项目目录
npm install --save-dev webpack
使用：npx webpack 入口文件名
2.webpack的配置文件
module.exports = {
entry: __dirname +"/app/main.js",//唯一入口文件
output: {
path: __dirname +"/public",//打包后的文件存放的地方
filename:"bundle.js"//打包后输出文件的文件名
}
}
使用：npx webpack //配置好可以省略文件名
注：npx webpack --config webpack.config.js //修改了webpack.config.js 名称时候，可以用该指令指定执行的webpack配置文件，官方文档描述：使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用；
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
3.更快捷的执行打包任务
在package.json中对scripts对象进行相关设置
{
"name": "vue-manage-system",
"version": "3.1.0",
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
"author": "lin-xin <[email protected]>",
"private": true,
"scripts": {
"bundle":"webpack",// 可以使用 npm run bundle 命令，来替代我们之前使用的 npx 命令
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js"
}
}
使用：npm run bundle
4.运行webpack的方式：
@1:webpack index.js(全局)
@2:npx webpack index.js
@3:npm run bundle
5.做webpack打包时候，输出的提示命令含义
Hash：本地打包对应的唯一hash值
version：本次打包使用的webpack版本
time：当前打包耗时
asset：打包出的文件名
size：文件大小
chunks：复杂打包时候，其他打包js的id也会放在bundle.js的chunks字段中
chunks Names：同上，每个js文件对应的名字
entrypoint main = bundle.js 对应的是配置中入口文件的名字
警告：webpack没有配置打包环境和模式时候会报警告
默认的模式是：
mode:'production'//（代码压缩）webpack中配置，可选：development（代码未压缩）
6.使用loader打包静态资源【图片篇】,配置文件中进行配置
module: {
rules: [{
test：/\.jpg$/,
use:{
loader:'file-loader'
}
}]
}
以上配置代码含义：打包模块以jpg结尾的文件，使用file-loader来帮助我们做jpg文件的打包（若没有则需要安装npm install file-loader -D）
file-loader底层帮我们做的事情：
当他发现在代码里引入图片模块时候，会把这个模块，帮助打包移动到dist目录下；
得到图片（相对于dist目录的）名称，将名称作为返回值，返回给我们引入模块的变量之中；
7.loader是什么？
loader就是一个打包方案，知道对于某个特定文件，webpack该如何进行打包；
官方文档定义，loader用于对模块的源代码进行转换，可以使你在 import 或"加载"模块时预处理文件，可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
通俗理解的话，就是，由于webpack不能识别非js结尾的模块，所以通过loader使webpack识别出来（loader的作用）
如何配置loader：webpack.config.js中 配置module-rules（符合的规则）
拓展：配置loader--在module-rules-options中进行配置
module: {
rules: [{
test：/\.jpg$/,
use:{
loader:'file-loader'，
options:{
name:'[name].[ext]'//占位符:原始名.后缀
outputPath:'images/' //当我遇到jpg文件时候，打包时候将其打包生成到dist/images的文件夹里
}
}
}]
}
8.使用loader
在你的应用程序中，有三种使用 loader 的方式（详见官方文档）：
配置（推荐）：在 webpack.config.js 文件中指定 loader。
内联：在每个 import 语句中显式指定 loader。
CLI：在 shell 命令中指定它们。
9.使用loader打包静态资源【图片篇】，更多配置
url-loader可以实现file-loader所实现的一切功能
当使用url-loader会将图片转化成一个base64的字符串，然后直接放到js文件里，不是直接生成图片
好处：省略http请求
缺点：图片文件大的时候会影响加载速度
因此，可以对图片的大小进行判断，图片较小时候放到js中，较大时候生成图片，使用limit配置
module: {
rules: [{
test：/\.jpg$/,
use:{
loader:'file-loader'，
options:{
name:'[name].[ext]'//占位符:原始名.后缀
outputPath:'images/' //当我遇到jpg文件时候，打包时候将其打包生成到dist/images的文件夹里
limit：2048//图片小于2048时候，图片转化成一个base64的字符串，放到js文件里，大于2048时候，生成图片引入
}
}
}]
}
10.使用loader打包静态资源【样式篇】
@1.需要用css-loader和style-loader配合使用
css-loader: 分析出几个css文件之间的关系，最终把这些css文件合并成一段css
style-loader: 在得到css-loader生成的内容之后，会把这段内容挂载到页面的head部分
@2.使用less,scss,stylus等的时候，需要添加额外对应的loader来进行编译
{
test: /\.less$/,
loader: ['style-loader','css-loader','less-loader','postcss-loader']
//或者loader: "style-loader!css-loader!less-loader"
}
注：loader是有执行顺序的（从下到上，从右到左）
@3.postcss-loader: 自动添加厂商前缀；
使用postcss-loader需要目录中创建postcss.config.js文件（详见文档）
配置如下：
module.exports = {
"plugins": {
require('autoprefixer')//需要下载
}
}
@4.补充：css配置项
imporeLoaders:2
作用：当less中再去@import less文件时候，webpack打包时候可能不会走postcss-loader和less-loader，而直接去走css-loader了，那么则需要用imporeLoaders去规定，通过import引入的less文件，在引入之前，也要去走2个loader；就会保证不管是在js直接引入less文件还是less中@import引入less文件都会执行所有的loader
{
test: /\.less$/,
loader: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'less-loader',
'postcss-loader']
}
@5.样式模块化:防止样式耦合、冲突
在js中引入的less是全局的，因此可以使用模块化css（即该css在特点的模块内有效）
配置options中的modules
{
test: /\.less$/,
loader: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2，
modules:true,//
}
},
'less-loader',
'postcss-loader']
}
使用：
import style from ‘ /css路径’
img.classList.add(style.avatar)
11.使用loader打包静态资源【字体篇】
file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录
字体配置使用file-loader 进行配置
12.使用 plugins 让打包更便捷
1.安装: npm install html-webpack-plugin -D
2.使用:var HtmlWebPackPlugin = require('html-webpack-plugin');//引入
3.在webpack.config.js中配置：plugins:[]