环境：nodejs v14.13.0、webpack v5.57.0、webpack-cli v4.9.2、webpack-dev-server v4.7.4
webpack 5个核心概念
Entry
入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output
输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
Loader
Loader（加载器）让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）
Plugins
插件（Plugins）可以用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等。
Mode
Mode（模式）指示webpack使用相应模式的配置。
image.png
创建空项目
1、创建一个新的文件夹，执行如下命令，并创建子文件夹src、build。
// 初始化项目信息，生成package.json文件
npm init
// 安装webpack 相关依赖（全局/本地）
npm i webpack webpack-cli webpack-dev-server -g
npm i webpack webpack-cli webpack-dev-server -D
2、新建 src/index.js、src/data.json 文件
src/index.js代码：
/*
1、webpack的入口文件
开发环境：webpack ./src/index.js -o ./build/ --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/main.js
整体打包环境是开发环境
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/main.js
整体打包环境是生产环境
2、结论
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境和开发环境将ES6模块化编译成浏览器能够识别的模块化
3.生产环境比开发环境多一个压缩js代码
*/
function add(x, y){
return x+y;
}
console.log(add(1,2));
import data from './data.json'
console.log(data)
data.json代码：
{
"name": "aaa",
"age": 10
}
3、执行打包命令，即可生成 build/main.js 文件
webpack ./src/index.js -o ./build/ --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production
4、运行检测
node ./build/main.js
webpack配置打包样式资源
在项目根路径下新建 webpack.config.js 文件，代码：
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
}
]
},
plugins: [
// 详细plugin配置
],
// 模式：development/production
mode: 'development'
}
添加依赖
cnpm i css-loader style-loader -D
执行打包命令，在build下生成app.js
webpack
测试：在build下创建index.html页面，引入app.js，查看效果即可
webpack配置打包html资源
添加依赖
cnpm i html-webpack-plugin -D
webpack.config.js 文件，代码：
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
})
],
// 模式：development/production
mode: 'development'
}
创建 src/index.html 文件，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
执行打包命令，在build下生成app.js、index.html
webpack
webpack配置打包图片资源
下载依赖
cnpm i url-loader file-loader html-loader -D
webpack.config.js代码：
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
// 处理图片资源。问题：处理不了html中的图片
test: /\.(jpg|png|gif)$/,
// 下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片资源小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：url-loader默认采用es6模块化解析，而html-loader引入图片是commonjs
// 解决：关闭url-loader的es6模块化，采用commonjs解析
esModule: false,
// 图片重命名，[hash:10]前10位，[ext]文件原扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）
loader: 'html-loader'
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
})
],
// 模式：development/production
mode: 'development'
}
webpack配置打包其他资源（字体等）
webpack.config.js
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
// 处理图片资源。问题：处理不了html中的图片
test: /\.(jpg|png|gif)$/,
// 下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片资源小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：url-loader默认采用es6模块化解析，而html-loader引入图片是commonjs
// 解决：关闭url-loader的es6模块化，采用commonjs解析
esModule: false,
// 图片重命名，[hash:10]前10位，[ext]文件原扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）
loader: 'html-loader'
},
{
// 打包其它资源（除css、js、html资源）
exclude: /\.(css|js|html|less|json)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
})
],
// 模式：development/production
mode: 'development'
}
webpack配置devServer
安装依赖
cnpm i webpack-dev-server -D
webpack.config.js
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
// 处理图片资源。问题：处理不了html中的图片
test: /\.(jpg|png|gif)$/,
// 下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片资源小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：url-loader默认采用es6模块化解析，而html-loader引入图片是commonjs
// 解决：关闭url-loader的es6模块化，采用commonjs解析
esModule: false,
// 图片重命名，[hash:10]前10位，[ext]文件原扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）
loader: 'html-loader'
},
{
// 打包其它资源（除css、js、html资源）
exclude: /\.(css|js|html|less|json)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
})
],
// 模式：development/production
mode: 'development',
// 开发服务器devServer：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器。。。）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
// 服务器启动的服务目录
static:{
directory: resolve(__dirname, 'build'),
},
// 启动gzip压缩
compress: true,
// 端口
port: 3000,
// 自动打开浏览器
open: true
}
}
启动命令
npx webpack-dev-server
webpack.config.js完整代码
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
// 处理图片资源。问题：处理不了html中的图片
test: /\.(jpg|png|gif)$/,
// 下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片资源小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：url-loader默认采用es6模块化解析，而html-loader引入图片是commonjs
// 解决：关闭url-loader的es6模块化，采用commonjs解析
esModule: false,
// 图片重命名，[hash:10]前10位，[ext]文件原扩展名
name: '[hash:10].[ext]',
// 打包输出路径
outputPath: 'imgs'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）
// loader: 'html-loader',
loader: 'html-withimg-loader'
},
{
// 打包其它资源（除css、js、html资源）
exclude: /\.(html|js|json|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
// 打包输出路径
outputPath: 'media'
}
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
})
],
// 模式：development/production
mode: 'development',
// 开发服务器devServer：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器。。。）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
// 服务器启动的服务目录
static:{
directory: resolve(__dirname, 'build'),
},
// 启动gzip压缩
compress: true,
// 端口
port: 3000,
// 自动打开浏览器
open: true
}
}
提取css成单独的样式文件
安装依赖
cnpm i mini-css-extract-plugin -D
// cnpm i postcss-loader postcss-preset-env -D
webpack.config.js
/*
webpack.config.js是webpack的配置文件
作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
const {resolve} = require('path');
// 生成html文件，并自动引入打包后的资源文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 将css代码输出到单独的文件里
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出路径, __dirname: nodejs变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
// 输出文件名
filename: 'app.js'
},
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理，顺序从下往上（从右往左）
use: [
// 创建style标签，将js中的样式资源插入，添加到head中生效
// 'style-loader',
// 将css代码输出到单独的文件里
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
// 处理图片资源。问题：处理不了html中的图片
test: /\.(jpg|png|gif)$/,
// 下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片资源小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：url-loader默认采用es6模块化解析，而html-loader引入图片是commonjs
// 解决：关闭url-loader的es6模块化，采用commonjs解析
esModule: false,
// 图片重命名，[hash:10]前10位，[ext]文件原扩展名
name: '[hash:10].[ext]',
// 打包输出路径
outputPath: 'imgs'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）
// loader: 'html-loader',
loader: 'html-withimg-loader'
},
{
// 打包其它资源（除css、js、html资源）
exclude: /\.(html|js|json|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
// 打包输出路径
outputPath: 'media'
}
}
]
},
plugins: [
// 详细plugin配置
// html-webpack-plugin：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件，并自动引入打包输出的所有资源
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
],
// 模式：development/production
mode: 'development',
// 开发服务器devServer：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器。。。）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
// 服务器启动的服务目录
static:{
directory: resolve(__dirname, 'build'),
},
// 启动gzip压缩
compress: true,
// 端口
port: 3000,
// 自动打开浏览器
open: true
}
}
网友评论