Webpack入门
Webpack是什么
Webpack
是一个现代 JavaScript
应用程序的静态模块打包器(module bundler), 也就是个打包工具。
它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件,就可以在浏览器运行了。
我们将 Webpack
输出的文件叫做 bundle
。
为什么需要打包工具
开发时,我们会使用框架(React、Vue),ES6 模块化语法,Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法,才能运行。
所以我们需要打包工具帮我们做完这些事。
除此之外,打包工具还能压缩代码、做兼容性处理、提升代码性能等。
一、基本使用
先创建项目,然后来到项目根目录
初始化package.json
npm init -y
此此时会生成一个基础的 package.json
文件。
安装webpack
在安装
webpack
之前,请确保本地环境安装了node.js
, 尽量使用node新的长期支持的版本,旧版本可能遇到很多问题,因为它们可能缺少webpack
功能以及/或者缺少相关package
包。
npm install webpack --save-dev
如果使用 webpack 4+
版本,还需要安装 CLI。
npm install webpack-cli --save-dev
webpack-cli
- 此工具用于在命令行中运行 webpack
创建文件
在项目根目录创建src
文件夹, 再创建index.js
文件
- index.js
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);
目录结构
webpack-course # 项目根目录(所有指令必须在这个目录运行)
│── node_modules
│── src # 项目源码目录
| └── index.js # 项目主文件
|
└── package-lock.json
└── package.json
webpack打包
npx webpack ./src/index.js --mode=development
npx webpack
: 是用于运行本地安装 Webpack
包
./src/index.js
: 指定 Webpack
从 index.js
文件开始打包
--mode=development
:指定打包模式
默认
Webpack
会将文件打包输出到dist
目录下,如果自动创建了dist
目录那就代表打包成功了
总结
Webpack
本身功能比较少,只能处理 js
资源,一旦遇到其他资源就会报错
所以我们学习 Webpack
,就是主要学习如何处理其他资源
二、核心概念
entry(入口)
指示 webpack
应该从哪个文件开始打包, 默认为./src/index.js
output(出口)
指示 webpack
应该将打包好的文件输出到哪个目录,以及文件命名等, 默认为./dist/main.js
loader
webpack
自身只理解 javascript
, 而 loader
可以去处理那些非js的文件
loader
可以将所有类型的文件转换为 webpack
能够处理的有效模块, 然后就可以利用 webpack
的打包能力正常进行打包
plugins(插件)
plugins 用于扩展 webpack
功能,打包优化、压缩代码体积等
插件功能极其强大,可以用来处理各种各样的任务
想要使用一个插件,只需要 require()
它,然后把它添加到 plugins
数组中。多数插件可以通过选项(option)自定义
也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new
操作符来创建它的一个实例
mode(打包模式)
两种模式:
- 开发模式:
development
- 生产模式:
production
三、基本配置
webpack配置文件
在项目根目录下新建文件:webpack.config.js
-
webpack.config.js
的作用-
webpack.config.js
是webpack
的配置文件 -
webpack
在打包构建之前,会先读取这个配置文件, 从而基于给定的配置,再对项目进行打包
-
Webpack
是基于Node.js
运行的,所以配置文件采用Common.js
模块化规范
编辑配置文件
webpack.config.js
// Node.js的核心模块,用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js' // 输出文件的文件名
},
// 模块 处理项目中各种不同类型的模块
module: {
// 暂时只有js文件,现在用不着
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
配置脚本命令
可以在package.json ---> scripts
对象下面配置脚本
"scripts": {
"build": "webpack" // script 节点下的脚本,可以通过npm run 执行。例如npm run build 就可以执行webpack这条命令了
}
运行脚本打包
npm run build
此时功能和前面一样,也不能处理样式资源
总结
Webpack
都通过 webpack.config.js
文件进行配置,来增强 Webpack
的功能
四、处理样式资源
webpack
默认只能打包处理以.js
后缀名结尾的模块。其他非.js
后缀名结尾的模块webpack
默认处理不了,需要调用loader
才可以正常打包
loader
的作用:协助webpack
打包处理特定的文件模块
处理css资源
添加css资源
src/index.css
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
引入css资源
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);
// 引入 Css 资源,Webpack才会对其打包
import './index.css'
下载依赖
npm i css-loader style-loader --save-dev
loader介绍
css-loader:
负责将 Css 文件编译成 Webpack 能识别的模块style-loader:
会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js' // 输出文件的文件名
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}
]
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
test
表示匹配的文件类型
use
表示对应要调用的 loader
include
表示需要检查的目录
exclude
表示不需要检查的目录
-
注意:
-
use数组中指定的loader顺序是固定的
-
多个loader的调用顺序是:从后往前调用
webpack
默认只能打包处理.js
结尾的文件,处理不了其他后缀的文件- 由于代码中包含了
index.css
这个文件,因此webpack
默认处理不了 - 当
webpack
发现某个文件处理不了,会查找webpack.config.js
这个配置文件,看module.rules
数组中,是否配置了对应的loader
。 webpack
把index.css
这个文件,先转交给配置数组的最后一个loader
进行处理(先转交给css-loader)- 当
css-loader
处理完毕之后,会把处理的结果,转交给前一个loader
(转交给style-loader) - 当
style-loader
处理完毕后,发现前面没有loader
了,于是就把处理的结果,转交给了webpack
webpack
把style-loader
处理的结果,合并到/dist/bundle.js
中,最终生成打包好的文件。
-
打包
npm run build
查看效果
创建html模板文件
dist/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>Document</title>
</head>
<body>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<!-- 引入打包后的js文件 -->
<script src="./bundle.js"></script>
</body>
</html>
处理 less 和 sass/scss 资源
添加资源
src/index.less
#app {
.box2 {
height: 300px;
width: 300px;
background-color: aquamarine;
}
}
src/index.scss
#app {
.box3 {
height: 300px;
width: 300px;
background-color: burlywood;
}
}
引入资源
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);
// 引入 Css 资源,Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'
下载依赖
npm i less-loader node-sass sass-loader --save-dev
loader介绍
less-loader:
负责将 Less 文件编译成 Css 文件sass-loader:
负责将 Sass 文件编译成 css 文件node-sass:
sass-loader 依赖 node-sass 进行编译
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js' // 输出文件的文件名
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
]
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
打包
npm run build
查看效果
dist/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>Document</title>
</head>
<body>
<!-- 准备一个使用样式的 DOM 容器 -->
<div id="app">
<div class="box2">less</div>
<div class="box3">sacc/scss</div>
</div>
<!-- 引入打包后的js文件 -->
<script src="./bundle.js"></script>
</body>
</html>
可以看到,less
与sass/scss
的语法已经被转换为css
格式
五、处理图片资源
过去在 Webpack4
时,处理图片资源通过 file-loader
和 url-loader
进行处理
现在 Webpack5
已经将两个 Loader
功能内置到 Webpack
里了,只需要简单配置即可处理图片资源
添加图片资源
src/img/big.jpg
- 50.26kb
src/img/small.png
- 5.49kb
使用图片资源
src/index.scss
#app {
.box3 {
height: 300px;
width: 300px;
background-color: burlywood;
}
.box4 {
width: 200px;
height: 200px;
background-image: url('./img/big.jpg');
background-size: cover;
}
.box5 {
width: 100px;
height: 100px;
background-image: url('./img/small.png');
background-size: cover;
}
}
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
}
]
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
打包
npm run build
查看效果
dist/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>Document</title>
<style>
#app {
display: flex;
}
</style>
</head>
<body>
<!-- 准备一个使用样式的 DOM 容器 -->
<div id="app">
<div class="box2">less</div>
<div class="box3">sacc/scss</div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<!-- 引入打包后的js文件 -->
<script src="./bundle.js"></script>
</body>
</html>
查看资源目录
可以看到只有一张big.jpg
打包后的图片文件,因为small.png
的大小不足10kb
以 data URI
形式内置到 js
中了
六、处理js资源
webpack
默认处理了js
资源, 为什么还要处理js
资源
这是因为浏览器无法识别es6
语法,webpack
默认只对js
进行打包,不会将es6
语法转换为es5
语法供浏览器使用,所以需要我们自己配置,使 es6
语法转换为浏览器能识别的 es5
语法
下载依赖包
npm i babel-loader @babel/core @bable/preset-env
准备es6资源
src/index.js
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);
// 添加es6语法
const string = () => {
return '温情key'
}
console.log(string());;
// 引入 Css 资源,Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
// clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
打包
npm run build
查看效果
配置前
配置后
可以看到箭头函数已经转换为了普通的命名函数
七、处理html资源
dist
目录属于构建目录,是我们源码的输出目录,我们希望里面的一切都是可以自动化的,包括 index.html
文件也能自动创建,js
文件也能自动引入到页面
所以我们需要用到插件 html-webpack-plugin
下载依赖
npm install html-webpack-plugin -D
添加模板文件
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>Document</title>
<style>
#app {
display: flex;
}
</style>
</head>
<body>
<!-- 准备一个使用样式的 DOM 容器 -->
<div id="app">
<div class="box2">less</div>
<div class="box3">sacc/scss</div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件配置列表 webpack各种扩展功能
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 输出文件的名称
// 打包后产出的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
title: 'webpack-index' // 生成页面的标题
})
],
}
打包
npm run build
然后就可以看到dist
目录下自动构建的html
文件了。
八、开发服务器
在开发阶段,遇到的问题是打包、运行、调试过程过于繁琐,回顾一下我们的操作流程:
编写代码
控制台运行命令完成打包
打开页面查看效果
并且,我们往往希望把最终生成的代码和页面部署到服务器上,来模拟真实环境
为了解决这些问题,webpack
官方制作了一个单独的库:webpack-dev-server
它既不是plugin
也不是loader
接下来看看它怎么用
下载依赖
npm i webpack-dev-server -D
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件配置列表 webpack各种扩展功能
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 输出文件的名称
// 打包后产出的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
})
],
// 开发服务器 devServer 自动化(修改代码自动编译,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:webpack-dev-server
devServer: {
port: 8088, // 服务器启动端口号
static: path.join(__dirname, 'dist'), // 服务器静态资源目录
open: false, // 启动服务器后自动打开浏览器
compress: true, // 开启gzip压缩
}
}
配置命令
package.json
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
执行命令
npm run dev
当在使用开发服务器时,所有代码都会在内存中编译打包,并不会输出到 dist
目录下。
九、css方面优化
单独文件
css
文件不处理会被打包到js
文件中,当js
文件加载时,会创建一个style
标签来生成样式
这样对于网站来说,可能会出现闪屏现象,用户体验不好
我们应该要使用单独的css
文件,通过link
标签加载提高用户体验
安装依赖
npm i mini-css-extract-plugin -D
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件配置列表 webpack各种扩展功能
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 输出文件的名称
// 打包后产出的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
// 开发服务器 devServer 自动化(修改代码自动编译,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:webpack-dev-server
devServer: {
port: 8088, // 服务器启动端口号
static: path.join(__dirname, 'dist'), // 服务器静态资源目录
open: false, // 启动服务器后自动打开浏览器
compress: true, // 开启gzip压缩
}
}
打包
npm run build
打包成功后可以看到dist
目录下static/css
多出一个单独的css
文件main.css
兼容性处理
因为css3
样式需要加不同的浏览器前缀才能兼容对应的浏览器,因此在项目打包编译的时候,需要对css3
属性进行统一的兼容性处理。
下载依赖
npm i postcss-loader postcss postcss-preset-env -D
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 将package文件中的css兼容性样式引入进来
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: getStyleLoaders(),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件配置列表 webpack各种扩展功能
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 输出文件的名称
// 打包后产出的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
// 开发服务器 devServer 自动化(修改代码自动编译,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:webpack-dev-server
devServer: {
port: 8088, // 服务器启动端口号
static: path.join(__dirname, 'dist'), // 服务器静态资源目录
open: false, // 启动服务器后自动打开浏览器
compress: true, // 开启gzip压缩
}
}
兼容配置
package.json
"browserslist": [
"> 1%",
"last 2 versions"
]
配置兼容性前后对比
配置前
配置后
css压缩
压缩css
代码体积
下载依赖
npm i css-minimizer-webpack-plugin -D
配置
// Node.js的核心模块,用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 将package文件中的css兼容性样式引入进来
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
filename: 'bundle.js', // 输出文件的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 模块 处理项目中各种不同类型的模块
module: {
rules: [{
test: /\.css$/,
use: getStyleLoaders(),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
},
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
}
}
}
]
},
// 插件配置列表 webpack各种扩展功能
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 输出文件的名称
// 打包后产出的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
// css压缩
new CssMinimizerPlugin(),
],
// 开发服务器 devServer 自动化(修改代码自动编译,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:webpack-dev-server
devServer: {
port: 8088, // 服务器启动端口号
static: path.join(__dirname, 'dist'), // 服务器静态资源目录
open: false, // 启动服务器后自动打开浏览器
compress: true, // 开启gzip压缩
}
}
打包
npm run build
可以看下打包后的css
文件,配置css压缩前和配置css压缩后有很明显的变化