Webpack: 是一个模块打包工具。是一个打包模块化js的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和所有依赖打包到一个单独的文件中。
安装方式： 全局安装
npm I webpack webpack-cli -g
全局安装的时候查看版本
webpack -v
卸载全局安装
npm uninstall webpack webpack-cli -g
局部安装，在当前项目下运行
npm install webpack -D
局部安装的时候查看版本
npx webpack -v
安装指定版本
npm install webpack@<version>
安装最新体验版本可能有bug不要用在生成上
npm install -D webpack@beta
安装webpack V4+版本时候，需要额外的安装 webpack-cli
npm安装时候 -D -S的区别
-D 是在开发环境中协助开发需要使用的
-S 是生产环境打包时需要的，默认是放在生产依赖中
在package.json中 -D在devDependencies对象中，-S在dependencies对象中
webpack初体验
webpack打包的时候会首先去找到项目下面的webpack.config.js配置文件 如果没有则默认的配置文件为
const path = require("path");
module.exports = {
// context上下文项目打包的相对路径
// process.cwd()方法会返回 Node.js 进程的当前工作目录。
context: process.cwd(),
// 入口 可以是字符串 数组 对象
entry: "./src/index.js",
// 打包输出 必须是绝对路径
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.js"
}
}
1、新建文件夹 webpack001然后初始化 项目 npm init -y
2、本地安装 npm install webpack webpack-cli -D
3、在项目下新建src/index.js文件 输入简单语句 console.log('hello webpack')
执行打包命令
npx webpack
可以看到新增目录以及打包后的文件main.js
entry 输入入口entry可以是字符串 数组 对象
1、是字符串的时候
entry: "./src/index.js",
相当于 {main: 字符串}
entry:{ main: "./src/index.js" }
2、是数组的时候，会将数组中的文件作为入口文件打包成一个输出文件，数组的时候会按照数组指定的顺序拼接执行，最终放在一个文件中。
entry: ["./src/other.js","./src/index.js"],
3、是对象的时候可以配置多入口文件，当配置了多入口文件的时候输出文件还是配置指定目录的时候会报错,此时正确配置是 或者不配置output的filename也是可以打包多个入口文件的
entry: {
main: "./src/index.js",
other: "./src/other.js",
},
// 打包输出 必须是绝对路径
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].js"
}
Output 输出的filename配置方法
1、固定值 只能是一个入口的时候这样配置
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.js"
}
2、占位符 一个入口或者多个入口都可以这样配置,会按照默认入口的key值生成文件名
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].js"
}
3、hash chunckhash contenthash 值默认是20位也可以自己设置位数
Hash: hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值，v5版本已弃用
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]-[hash:6].js"
}
当配置是下面这样的时候 输出的所有文件都是带一样的hash hash跟整个项目相关 ，项目发生变化这个hash就会变化
const path = require("path");
module.exports = {
// context上下文项目打包的相对路径
// process.cwd()方法会返回 Node.js 进程的当前工作目录。
context: process.cwd(),
entry: {
main: "./src/index.js",
other: "./src/other.js",
},
// 打包输出 必须是绝对路径
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]-[hash:6].js"
}
}
chunckhash: 根据不同的入口进行文件依赖分析，构建对应的chunck生成对应的hash值
当修改为
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]-[chunkhash:6].js"
}
打包输出的文件名称是，如果修改其中一个文件名称的话 改变的只是当前文件的hash没有修改的就不会改变。
contenthash: contenthash表示由文件内容产生的hash值，内容不同产生的contenthash值也不一样。在项目中，通常做法是把项目中css都抽离出对应的css文件来加以引用。
new MiniCssExtractPlugin({
filename: "[name][chunkhash:8].css"
})
构建模式mode
mode值选项: development production none 默认值是production
开发模式开启有利于热更新的处理识别哪个模块发生变化，生产模式会有帮助模块压缩，处理副作用等功能。
Loader：弥补和增强webpack对其他模块的一个处理。 webpack只支持json和js的模块不支持其他类型文件的模块，这时候就需要使用loader来处理这个问题去支持其他的模块。 使用module对象下面的rulers数组来配置支持的loader的规则。一个loader只做一件事。
loader的顺序是从后往前执行的，css-loader:将css的内容加载到js中去 style-loader:从js中提取css的loader在html中创建style标签，把css的内容放在style标签中。
npm install style-loader css-loader -D
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader","css-loader"],
}
],
}
Plugins:插件。作为webpack的一个强有力的补充。处理loader处理不了的事情。机制原理是作用于webpack整个打包周期的，打包前，打包中，打包后需要做的事情就用plugin。 比如clean-webpack-plugin就是每次构建之前删除当前的构建文件的插件。如果不使用就会存在冗余文件需要手动删除。 配置里面plugins数组与module同级别
npm install clean-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin')
// plugins进行插件的配置
plugins: [
// 清除dist文件夹
new CleanWebpackPlugin(),
]
