1. 简介
webpack（模块打包工具）：webpack是一个打包模块化的Javascript的工具，它会 从入口模块出发，识别出源码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其他所有的依赖打包到一个单独的文件.
2. 安装
2.1 全局安装
会造成多个项目只能使用同一个webpack版本
//在webpack 4.0版本需要安装两个
npm install webpack webpack-cli -g
//检查版本
webpack -v
// 卸载
npm uninstall webpack webpack-cli -g
2.2 局部安装
支持多个项目使用不同webpack版本
npm install webpack webpack-cli -D
//局部安装 webpack 命令找不到
如何使用
方法一： ./node_modules/.bin/webpack
node_modules/.bin 下 的文件都是可执行文件，都是原文件的软连接（符号链接）
.bin 下面的文件都是npm 生成的
#!/usr/bin/env node
#!：一般放在第一行，告诉使用者使用什么程序执行下面代码（软链接和符号链接叫法都和这个有关系）
/usr/bin/env ：node 的位置
node：使用node执行
方法二：npx webpack
npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装。
方法三： 配置package.json中的script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webapck"
},
执行 npm run dev
npm run 会创建一个shell脚本，这个脚本把当前项目的node_modules/.bin的绝对路径放在了系统的环境变量中
env：查看环境变量
rm -rf 与 rimraf 一样都是删除文件
scripts 中 有两种脚本钩子pre（前置钩子）,post（后置钩子），在dev前加上pre成predev，当执行dev的时候，回先执行predev，postdev为执行完dev后执行的命令
package.json 中的bin 作用
当文件被引入进去的时候,npm将软链接这个文件到prefix/bin里面,以便于全局引入,或在./node_modules/.bin/目录里； bin中的key值是引入时候的名称
3. 配置
webpack 4.x 默认只支持 js和json格式
默认配置 webpack.config.js
const path=require('path');
module.exports={
//构建入口
entry:'./src/index.js',
output:{
// path 为绝对路径 ，输出的目录
path:path.resolve(__dirname,'./dist'),
filename:"[name].js",//输出的名称
},
mode:"development"
}
3.1 入口 entry
指定webpack打包入口文件:Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入
适合一个单页面（spa），输入为字符串或者数组
entry: string|Array<string>
entry: './path/to/my/entry/file.js' | ['./path/to/my/entry/file.js']
适合一个多页面应用（mpa），输入为对象
entry: {[entryChunkName: string]: string|Array<string>}
上面的entry相当于
entry:{
main: './path/to/my/entry/file.js' ,
}
对象的key值为output输出适合的 name（默认为main）,
3.2 出口 output
打包转换后的文件输出到磁盘位置
output:{
// path 为绝对路径 ，输出的目录
path:path.resolve(__dirname,'./dist'),
filename:"[name]-[hash:6].js",
//输出的名称 name为多页面的key或者默认的main,
//hash为此次构建的hash值，用于与缓存，后面的：6可以设置也可以不设置，设置数值为截取个数（长度）
},
3.3 mode
Mode用来指定当前的构建环境（‘none' | 'production' | 'development'）
| 选项 | 描述 | 优点 |
|---|---|---|
| development | 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 开启有利于热更新处理，识别模块变化 |
| production | 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin | 开启压缩，处理副作用 |
| none | 退出任何默认优化选项 | 更灵活 |
3.4 module
loader，模块解析，模块转换器器，用于把模块原内容按需转换成新内容，webpack默认只知道如何处理js和JSON模块，?那么其他模块如何处理呢，这就用到了不同的loader,但是一个loader只处理一件事
loader在一个test中 执行有顺序，从右像左，从下到上
module:{
rules:[
{
test:/.css$/,//处理css
use:[
{
loader:'style-loader' //把css加入到html中
options:{
injectType: "singletonStyleTag" //将所有的style标签合并成一个
}
},
},
'css-loader' //处理css
],
// use:['style-loader','css-loader']
},
{
test:/.(png|jpe?g|gif)$/,//处理图片
use:{
// loader:'file-loader', //file-loader 只是移动文件，还有一个
loader:'url-loader',//url-loader 内部使用file-loader。可以处理所有的file-loader干的事，但是遇到jpg格式的模块，会把该图片转化成base64格式的字符串。
// 打包到js里，适合小体积的图片，大图片不合适
// 额外配置，比如名称。hash等
options:{
name:'[name]_[hash:6].[ext]',//输出name //name为本身文件的name,ext代表后缀
outputPath:'images/' //输出到的目录
}
},
},
{
test:/.(woff2?|ttf|svg|eot)$/,//处理字体
use:{
loader:'file-loader', //file-loader 只是移动文件，还有一个
options:{
name:'[name]_[hash:6].[ext]',//输出name //name为本身文件的name,ext代表后缀
outputPath:'font/' //输出到的目录
}
},
}
]
}
css自动添加前缀
// npm i postcss-loader autoprefixer -D
{
test: /.css$/,//处理css
use: [
{
loader: 'style-loader', //把css加入到html中
options: {
injectType: "singletonStyleTag" //将所有的style标签合并成一个
}
},
'css-loader', //处理css
{
loader: "postcss-loader",
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
}),
],
}
}
]
// use:['style-loader','css-loader']
},
