网站 https://webpack.docschina.org
文档 https://webpack.docschina.org/concepts/
简介：本质上，webpack 是一个前端资源构建工具，用于现代 JavaScript 应用程序的静态模块打包工具。
当webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，
此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
全局下载包
cnpm install -g webpack webpack-cli
或者cnpm i -g webpack webpack-cli
局部下载包
初始化项目npm init -y
下载包
cnpm i --save-dev webpack webpack-cli
或者cnpm i -D webpack webpack-cli
五大模块
入口(entry)
输出(output)
loader加载器 (module)
插件(plugin)
模式(mode)
1.入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。
例如：
webpack.config.js
module.exports = {
//单入口
entry: './path/to/my/entry/file.js',
//多入口
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};
2.输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
//filename: 'my-first-webpack.bundle.js',
filename: './js/my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
}
};
path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。resolve()用来拼接路径
3.loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
在更高层面，在 webpack 的配置中，loader 有两个属性：
test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。
webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
}
]
}
};
4.插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。
你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
在上面的示例中，html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入所有生成的 bundle。
5.模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。
其默认值为 production。
6.entry入口
在webpack.config.js文件中
module.exports = {
//单入口
//entry:'./src/js/index.js',
//多入口
entry: {
index: './src/js/index.js',
index2: './src/js/index2.js'
},
}
7.output输出
在webpack.config.js文件中
const {resolve} = require('path');
module.exports = {
output: {
//单出口
//filename: './js/built-dev.js',
//多出口
filename: './js/[name]-built-dev.js',
// 输出路径写绝对路径
// __dirname nodejs的变量，代表当前文件的目录的绝对路径
path: resolve(__dirname, 'build')
}
}
8.loader module
在webpack.config.js文件中
module.exports = {
module:[
//loader的配置
....
]
}
9.转义js文件，排除node_modules中的文件
babel-loader
安装 cnpm i -D @babel/core @babel/preset-env babel-loader
配置
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
10.css文件
style-loader
css-loader
安装 cnpm i -D style-loader css-loader
配置
{
// 检测 匹配哪些文件 值为正则表达式
test: /\.css$/,
// 使用哪些loader对文件进行处理
use: [
// use数组中的执行顺序：从右到左，从下到上
// 创建一个style标签，将js中的css样式资源插入进去，添加到页面head中生效
"style-loader",
// 将css文件变成commonjs的模块，加载到js中，里面内容是样式字符串
"css-loader",
]
}
11.less文件(less-loader依赖less)
style-loader
css-loader
less-loader
安装 cnpm i -D style-loader css-loader less-loader less
配置
{
test: /\.less$/,
use: [
// 创建style标签并添加到head中
'style-loader',
//将css处理成模块，整合到js中
'css-loader',
// 将less文件编译成css文件 需要下载less-loader 和less
'less-loader'
]
}
12.less和css中的图片使用，不处理html中的img
1.url-loader(url-loader依赖file-loader)
安装
cnpm i -D url-loader file-loader
配置
{
test: /\.(JPG|jpg|png|gif)$/,
// 下载url-loader和file-loader url-loader依赖file-loader
use: 'url-loader',
options: {
//设置输出文件目录路路径
outputPath: 'images',
// 图片大小小于8kb,就会被base64处理， 8-12kb以下图片base64处理
// base64优点：减少请求数量（减轻服务器压力）
// base64缺点：图片体积会更大（文件请求速度会更慢）
limit: 8 * 1024,
// 给图片进行重命名
// [hash:10] 取图片的hash的前10位
// [ext]取图片原来扩展名
name: '[hash:10].[ext]',
}
}
2.或者file-loader（file-loader不会使用base64处理小文件，原文件会保留）
安装
cnpm i -D url-loader file-loader
配置
{
test: /\.(JPG|jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
// 设置图片输出文件路径
outputPath: 'images'
}
}
],
}
13.html中的img图片使用
html-loader（处理html中的image图片的,负责引入img，从而能被url-loader处理）
安装 cnpm i -D html-loader
配置
{
test: /\.html$/,
use: 'html-loader'
},
其他文件（比如：字体文件）
排除之前已经loader配置过的文件
file-loader
安装 cnpm i -D file-loader
配置
{
exclude: /\.(html|js|less|css|png|jpg|gif|json)$/,
loader: 'file-loader',
options: {
name: "[hash:10].[ext]",
outputPath: 'media'
}
}
14.plugin的配置
在webpack.config.js文件中
module.exports = {
plugins:[
//插件的配置 插件实例
....
]
}
15.第三方插件：自动生成bundle的html文件
html-webpack-plugin
安装 cnpm i -D html-webpack-plugin
引入 const HTMLWebpackPlugin = require('html-webpack-plugin');
配置:
在出口目录中生成默认html文件
new HTMLWebpackPlugin()
或者在出口目录中生成指定模板html文件
new HTMLWebpackPlugin({
// 指定一个html文件，在改html文件中不需要引入出口js文件，会自动引入
template: './src/main.html'
})
16.源映射source maps
source maps可以准确定位错误出现在具体哪个模块中
source-map提供一种技术，提供源代码到构建后的代码的映射的技术，如果构建后代码出错了，
通过映射关系可以追踪到源代码的错误，利于调试和找错误，使用webpack命令会生成xxx.map文件
inline-source-map 内联，构建速度更快，只生成一个内联source-map
hidden-source-map 外部
eval-source-map 内联，每一个文件生成一个对应的source-map，都在eval
配置：
在webpack.config.js文件中
module.exports = {
devtool: 'inline-source-map'
}
17.mode 模式
在webpack.config.js文件中
module.exports = {
// 模式配置 开发模式
mode: 'development',
// 模式配置 生产模式 压缩代码
// mode: 'production',
}
18.webpack-dev-server 开发服务器
webpack-dev-server是一个简单的web服务器，在代码修改后能重新构建代码并且刷新浏览器
自动化，自动编译，自动打开浏览器，自动刷新浏览器
特点：只会在内存中编译打包，不会有任何实体文件输出
启动devServer指令为 webpack-dev-server
本地下载的话需要npx webpack-dev-server查找包并运行，可以将该命令配置到package.json中
安装 cnpm i -D webpack-dev-server
配置：
在webpack.config.js文件中
module.exports = {
devServer: {
// 运行的构建后的目录
static: './build',
// 启动gzip压缩
compress: true,
// 端口号，默认是8080
port: 3000,
// 是否自动打开浏览器
open: true
}
}
