目标: webpack本身是, node的一个第三方模块包, 用于打包代码
现代 javascript 应用程序的 静态模块打包器 (module bundler)
把很多文件打包整合到一起, 缩小项目体积, 提高加载速度
其中功能: less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩合并
（wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）
因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
全局安装webpack
局部安装webpck--save-dev是开发时依赖，项目打包后不需要继续使用。
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。
mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。
index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。
package.json：通过npm init生成的，npm包管理的文件。
entry: 为打包的入口
output： 为打包的出口
将webpack命令映射npm run除了将webpack映射入口，出口之外，还可以将webpack命令映射为npm run 文件
webpack - 打包 js
配置
1.创建webpack配置文件 webpack.config.js
// 导入path模块
const path = require('path')
// webpack配置
module.exports = {
// 配置打包入口文件
entry: path.resolve(__dirname, 'src', 'index.js'),
// 配置打包输出位置，及文件名
output: {
path: path.resolve(__dirname, 'dist'),
// 输出文件名
filename: 'bundle.js'
}
}
2.配置webpack执行命令
webpack需要npm来调用才可以执行，在package.json中的script中进行配置
"script":{
"dev":"webpack --config webpack.config.js"
}
经过以上配置，在控制台运行 npm run dev 命令执行 webpack对 js 文件进行打包
development 开发模式
开发模式 :不会对打包生成的文件进行代码压缩和性能优化 打包速度快，适用于开发阶段使用
production 生产模式
生产模式: 会对打包生成的文件进行代码压缩和性能优化 打包速度很慢，仅适合在项目发布阶段使用不设置默认为production模式
在webpack.config.js中添加一个mode配置项
// 导入path模块
const path = require('path')
// webpack配置
module.exports = {
// ---------------- 打包模式
mode: 'development',
/* // 配置打包入口文件
entry: path.resolve(__dirname, 'src', 'index.js'),
// 配置打包输出位置，及文件名
output: {
path: path.resolve(__dirname, 'dist'),
// 输出文件名
filename: 'bundle.js'
*/
}
}
打包不同类型文件，要使用不同的loader，loader的作用：读取文件内容。对文件内容进行特定的处理。
npm i style-loader css-loader --save-dev下载 style-loader、css-loader
css-loader是将css代码从css文件中读取到内存中，而style-loader是将读取到的css代码设置到index.html文件的style标签内
// webpack配置
module.exports = {
// ...
// 扩展文件加载模块 - css模块加
module: {
// 由于可以加载多种文件，每种文件对应一种loader，所以是数组
rules: [
// 由于是多种文件，所以使用扩展名进行区分，再应用不同的loader
{
// 正则判断文件类型
test: /\.css$/i,
// 这种类型文件使用以下loader
use: ['style-loader', 'css-loader'],
}
]
}
}
npm i less-loader --save-dev下载 less-loader
webpack - 打包图片
在webpacke5.0中无需下载安装图片对应的loader(模块)，因为内嵌了对象图片资源处理的模块，可以直接使用内置的资源模块进行处理(asset/modules) 内置了四种处理图片的资源模块
asset/resource
将图片文件单独打包成一个文件，保存到打包目录，再使用url(file:///d:/xxx/xxx) 就相当于将原图片，复制到了另个新的位置，改了名，url再指向新的位置即可。 之前是通过 file-loader 实现
asset/inline
将图片读取成base64格式，使用时通过url(data:image/png;base64,xxxxx)进行引用 之前是通过 url-loader 实现
asset/source
主要用于字体文件 通过 data:font/woff2;base64,xxxxxoxxox 之前是通过 raw-loader 实现
asset
在asset/resource 与 asset/inline之间自动选择，之前是通过url-loader，并配置资源体积限制实现。
webpack - 打包生产代码
当一个项目开发完毕后，要对项目的代码进行最终的打包，最终的打包，要以production模式进行。
可以修改webpack.config.js中的mode:'production'
// webpack配置
module.exports = {
// 打包模式
// 生产环境打包模式
mode: 'production',
}
（推荐）也可以在package.json的 script 中配置打包命令，通过--mode=production来指定
"build":{
"serve":"webpack --config webpack.config.js --mode=production"
}
打包命令
npm run build