全局安装：不推荐
安装webpack v4+版本时，需要额外安装webpack-cli：npm install webpack webpack-cli -g
检查版本：webpack -v
卸载：npm uninstall webpack webpack-cli -g
全局安装webpack，这会将你项目中的webpack锁定到指定版本，造成不同的项目中因为webpack依赖不同版本而导致冲突，构造失败
项目安装：推荐
安装最新的稳定版本：npm i -D webpack
安装指定版本：npm i -D webpack@<version>
安装最新的体验版本，可能包含bug，不要用于生产环境：npm i -D webpack@beta
安装webpack V4+版本时，需要额外安装webpack-cli：npm i -D webpack-cli
校验方法：
执行方式：1. ./node_modules/.bin/webpack 2.npx webpack 3.在package.json中的scripts中设置"dev":"webpack"，命令行执行npm run dev
node_modules -> .bin目录为一个可执行文件目录（软连接，符号链接），找到下面的webpack文件，里面有个package.json文件（每个包都有package），，他里面有bin字段（"bin":{"webpack":"bin/webpack.js"}，里面有个命令，所以但我们执行webpack命令的时候，就走bin目录下的可执行文件
npx帮助我们在项目中的node_modules里查找webpack
npm run这个命令会创建一个shell脚本，这个脚本就是把当前项目下的node_modules的绝对路径放在了系统的环境变量里
1.创建一个文件夹，进入文件夹，执行初始化命令npm init -y（生成package.json文件）
2.局部安装webpack-cli：npm i webpack webpack-cli -D
3.创建一个src文件夹，创建一个index.html文件和一个index.js文件，用以上三种执行方式的一种，执行就可以获得一个打包后的文件dist
------------------------------------------------------------------
为什么webpack构建工具不适合用来构建框架，库
react和vue都不是用webpack构建的，都是用rollup进行构建的，根据上面打包生成后的main.js代码，我们看到打包后他加了好多其他代码在打包后的文件了，无形的污染了我们的代码还增加了我们代码的体积；webpack擅长开发环境的定制，也能构建库和框架，但不是他的亮点
----------------------------------------------------------------
webpack4.x的默认配置：webpack默认只支持js格式和json格式
如果有配置文件就执行配置文件，如果没有配置文件，会执行默认的配置
webpack的核心概念：
1.entry：指定打包的入口文件；格式：字符串、数组、对象；字符串和数组适合单页面应用（spa），对象适合多页面应用（mpa）
2.output：输出；path：多入口对应多输出，输出路径必须是绝对路径；filename：指定构建输出文件名称
3.mode：构建模式指定当前的构建环境--none、development（打包后不会被压缩，方便查看）、production（有一些优化选项，压缩js代码，减少代码体积）
4.loader：webpack默认只支持js格式和json格式，如果我们引入css样式，webpack不知道如何处理，所以引入loader，告诉webpack不同loader处理不同的格式的文件；
loader处理webpack不支持的格式文件、模块；一个loader只处理一件事情，并且loader的执行有顺序的，从右向左执行
5.plugin：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者你想要的事情，作用于整个构建过程；
作用于webpack打包的整个过程；webpack的打包过程是有（生命周期的概念）钩子；
---------------------------------------------------------------
npm scripts有脚本钩子；pre为前置钩子，post为后置钩子
比如你想在执行dev之前做一些事情，就可以创建一个前置钩子predev，如果你想在dev之后做一些事情，就创建一个后置钩子postdev
plugin实例：
htmlWebpackPlugin：在打包结束后，自动生成一个HTML文件，并把打包生成的js模块引入到html中---》npm install --save-dev html-webpack-plugin
cleanWebpackPlugin：每次打包之前，先清空dist目录-----》npm install --save-dev clean-webpack-plugin
miniCssExtractPlugin：抽离css的，输出独立文件-----》npm install --save-dev mini-css-extract-plugin
sourceMap：源代码与打包后的代码的映射关系，通过sourceMap定位到源代码，用来定位代码错误；devtool:"none","sourcemap"
mode:"production"----devtool默认为none；mode:"development"-----devtool默认为启动状态
eval：速度最快，使用
cheap开头的值，只显示行数不显示列数，提高构建速度
inline开头的，将.map作为DataURI嵌入，不单独生成.map文件
source-map：生成map文件
开发环境推荐配置：devtool:"cheap-module-eval-source-map"
线上不推荐开启
WebpackDevServer：webpack的调试环境
每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦，我们可以安装使用webpackdevserver来改善这块体验
安装：npm install webpack-dev-server -D 帮我们创建一个本地服务器，在scripts里配置一个"server":"webpack-dev-serve"
配置文件里配置本地服务器的一些属性：devServer:{...}；配置完后会发现清空dist目录了，内容保存在物理内存当中，执行起来效率提升很多；帮我们打开一个浏览器
还可解决跨域，配置代理服务器，proxy （↑）
Hot Module Replacement（HMR热模块替换）
webpack内置的插件，所以直接引入webpack，并在plugins里创建实例 new webpack.HotModuleReplacementPlugin()；还需要在devServer里进行配置，用来监控哪个模块改变了，从而做局部刷新
不支持抽离出的css，我们要使用css-loader，不支持contenthash和chunkhash
使用module.hot.accept来观察模块更新 从而更新
热更新原理：每次改动页面上都会增加一个带有hash.hot-update.js（执行）和hash.hot-update.json（对比）；第二次会和第一次的文件做一个对比，看哪一块被改变了，实现局部更新，更新后要保留一个版本
Babel：处理ES6 (有些浏览器不支持ES6代码，需要babel转译成ES5，兼容浏览器)
Babel是JS编译器，能将ES6代码转换成ES5代码，让我们开发过程中放心使用JS新特性而不用担心兼容问题，并且还可以通过插件机制根据需求灵活的扩展
Babel在执行编译的过程中，会从项目根目录下的.babelrc JSON文件中读取配置，没有该文件会从loader的options地方读取配置
安装：npm i babel-loader @babel/core @babel/preset-env -D
babel/core:babel的核心库，提供很多api
babel/preset-env：把代码转为ES5规范
babel-loader：webpcak和babel的桥梁，进行通信连接
通过以上几个步骤还不够，默认的babel只支持let等一些基础的特性，Promise等一些还不能转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性
安装：npm install --save @babel/polyfill 垫片
在含有的js文件中引入 import "@babel/polyfill" -- 执行后发现代码体积变大，因为他里面包含了所有ecma的新特性----按需加载
按需加载方法：创建一个babel的配置文件.babelrc，并把babel的配置抽离出来，放入到.babelrc文件里，代码如下
{
"presets": [
[
"@babel/preset-env",
{
"target":{
"edge":"17",
"firefox":"60",
"chrome":"67",
"safari":"11.1"
},
"corejs":2,//新版本需要指定核心库版本
"useBuiltIns":"usage"//按需注入
}
]
]
}
以下是上面的内容配置的webpack.config.js
const path = require("path");//nodejs的path模块，处理路径
const htmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack");//hotModuleReplacement用
module.exports = {
//字符串和数组适合单页面应用（spa），对象适合多页面应用（mpa）
//entry:"./src/index.js",
//entry:["./src/index.js","./src/a.js"],
entry:{
main:"./src/index.js",
a:"./src/a.js"
},
mode:"development", //设置成developmen模式，打包后的代码不会被压缩，方便查看
output:{
path:path.resolve(__dirname,"./dist"),//必须是绝对路径
//filename:"main.js"//多页面应用不能用此写法
filename:"[name].js",//name为占位符，或者[name]_[hash:6].js名字多一个hash码，清缓存,:6是对hash值做裁剪
},
module:{
rules:[
{
test:/.css$/,
//一个loader只做一件事情，css-loader做代码提取，放到打包的js文件里，
//style以js操作dom的方式，将代码放到html标签里，生成style标签,不会生成独立文件
use:["style-loader","css-loader"],//loader是有执行顺序的，从后往前，先执行css-loader后执行style-loader
//use:[MiniCssExtractPlugin.loader,"css-loader"],//使用mini-css-extract-plugin就不能使用style-loader了,借助MiniCssExtractPlugin的loader实现抽离
},
{
//test:/.png$/,
test:/.(png|jpe?g|gif)$/,
use:{
loader:"file-loader",//支持各种文件 图片 外部字体库
options:{
name:'[name].[ext]',//名字和后缀
outputPath:'images/'
}
}
},
{
test:/.js$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/preset-env"] //使用polyfill按需引入的时候，将此行删除，因为移动到了.babelrc中
}
}
}
]
},
plugins:[
new htmlWebpackPlugin({
title:"首页",//支持ejs模板引擎的写法
template:'./src/index.html',
filename:'index.html'
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({//抽离css为独立文件输出
//加hash推荐使用contenthash，利于用户做缓存，如果用hash的话，每次打包都会改变
filename:'css/[name]_[contenthash:6].css',
//chunkhash递归依赖，一个入口肯定是一个chunk，一个chunk不一定只有一个依赖
//filename:'css/[name]_[chunkhash:8].css',
}),
new webpack.HotModuleReplacementPlugin()
],
devtool:"none",
devServer:{
contentBase:"./dist",//指定本地服务器的静态资源目录
open:true,//启动服务后要不要自动打开一个浏览器窗口
port:8081,//本地服务器端口
proxy:{
"/api":{
target:'http://localhost:9092'
}
},
//hmr做一下配置，监控哪个模块改变了，做局部刷新
//不支持抽离的css，所以要将loader中的MiniCssExtractPlugin.loader换为原来的style-loader
hot:true,//开启HMR
hotOnly:true,//浏览器不会自动刷新，哪怕HMR没有生效
}
}