基本使用
1.初始化包管理文件
进入项目根目录，在终端执行指令：npm init -y
注意：”name“不能也叫webpack，否则无法下载后面的包
2.下载包
添加为开发依赖：npm i webpack webpack-cli -D
3.启用Webpack
- 开发模式：
npx webpack ./src/index.js --mode=development - 生产模式：
npx webpack ./src/index.js --mode=production
基本配置
配置webpack.confing.js文件
const path = require("path")
module.exports = {
// 入口
entry: "./src/index.js",
// 输出
output: {
// 规定是绝对路径
path: path.join(__dirname, "./dist"),
// 设置文件名，将main.js文件放在static中的js目录下
filename:"static/js/main.js",
// 每次打包前，清空path里面的内容
clean:true
},
// 加载器
module: {
rules:[]
},
// 插件
plugins: [],
// 模式
mode:'development'
};
配置后可在项目目录下，输入npx webpack打包
处理样式资源
对于webpack，样式文件默认不能处理，所以需要借助loader进行处理，否则会报错
处理css文件
1.下载依赖
npm install style-loader css-loader -D
2.配置
module: {
rules: [
{
// test表示要匹配的文件类型
test: /\.css$/,
// use表示要使用的loader,调用顺序为从右往左
use: ["style-loader", "css-loader"],
},
],
},
- css-loader作用：将css文件编译成webpack能识别的文件
- style-loader作用：动态创建一个style标签，里面放置webpack的css模块
处理less文件
1.下载依赖
npm install less less-loader -D
2.配置
module: {
rules: [
{
test: /\.less$/,
// less-loader的作用：将less文件编译成css文件
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
处理sass或scss文件
1.下载依赖
npm install sass-loader sass -D
2.配置
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],
},
处理styl文件
1.下载依赖
npm install stylus stylus-loader -D
2.配置
module: {
rules: [
{
test: /\.styl$/,
use: [
"style-loader",
"css-loader",
// 将 Stylus 文件编译为 CSS
"stylus-loader",
],
},
],
},
处理图片资源
webpack5内置了file-loader和url-loader，无需下载额外的loader。file-loader可以将图片编译为webpack能识别的资源，而url-loader可以将小于某个大小的图片转化为base64的格式
base64格式的图片
1.base64是什么? 一些字符串，能表示一张图片
2.优点：一般的图片加载时，会发起网络请求，而base64格式的图片会在解析标签的时候直接加载出来，减少了网络请求。
3.缺点：会比一般的图片体积要大，特别是大图片转为base64，体积会增大很多
4.适用场景：小图片转化为base64
配置
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: "asset",
// 等于或小于10KB的图片将被打包成base64的格式
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 10KB
},
},
generator: {
// 哈希值用于确保每个图片文件不会重名，[hash:10]是只取哈希值的前10位
// 而ext是图片扩展名
filename: 'static/img/[hash:10][ext][query]'
}
},
],
},
注意：1KB=1*1024B，1B=8b，这里的b是位，B是字节
处理字体图标以及其他资源
module: {
rules: [
{
test: /\.(ttf|woff|woff2|mp4|avi)$/,
// 原封不动输出文件
type: "asset/resource",
generator: {
filename: "static/media/[hash:10][ext][query]",
},
},
],
},
处理js资源
webpack只能编译js中的ES模块化语法，不能编译其他语法，导致不能在ie等浏览器上运行，为了提高兼容性，我们需要做一些处理。其次，团队开发中，对代码格式有着严格的要求，而我们不能通过肉眼去观察，所以需要专业的工具来检测。
目的：统一代码风格和做兼容性处理
- 对于代码格式，我们使用Eslint完成
- 对于js兼容性处理，我们使用Babel完成
Eslint
官方文档：ESLint - Pluggable JavaScript linter - ESLint中文
1.下载依赖
npm install eslint-webpack-plugin eslint -D
2.在webpack.config.js中添加配置
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [new ESLintPlugin({
// 指定eslint要检查的文件目录
context:path.join(__dirname,'src')
})],
// ...
};
3.在.eslintrc.js中添加配置
module.exports = {
// 继承eslint的官方规则
extends: ["eslint:recommended"],
env: {
// 启用node中的全局变量
node: true,
// 启用浏览器中的全局变量
browser:true,
},
parserOptions: {
ecmaVersion: 6,
sourceType:"module"
},
// 这里的规则会覆盖继承过来的规则
rules: {
// 使用var变量会报错
"no-var":2
}
}
注意：
“0“或”off“：关闭规则
“1”或”warn“：启动规则，违背则警告
“2”或”error“：启动规则，违背则报错
tips:
可以在.eslintignore文件添加忽略eslint检查的目录，例如：dist
Babel
官方文档：Babel 中文文档 · 下一代 JavaScript 编译器 (docschina.org)
可以将es6以后的js语法编译成向下兼容的语法，相当于是js编译器
1.下载依赖
npm install -D babel-loader @babel/core @babel/preset-env
2.在webpack.config.js中添加配置
module: {
rules: [
{
test: /\.js$/,
// node_modules中的文件不做处理
exclude: /(node_modules)/,
// loader只能写一个loader,而use数组可以写多个loader
loader: 'babel-loader',
}
]
}
3.在babel.config.js中添加配置
module.exports = {
// 智能预设，能编译es6语法
presets: ['@babel/preset-env']
}
处理html资源
1.下载依赖
npm install html-webpack-plugin -D
2.配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
// 以自定义的文件为模板，生成新的html5文件
template:path.join(__dirname,"public/index.html")
})
],
};
3.作用
- 该插件将为我们生成一个HTML5文件，并使用script标签将打包后的入口文件自动引入。
- 将src中的index.html文件复制一份到根目录中（文件放在内存中，不在物理磁盘上）
打包后的html文件
搭建开发服务器&&自动化
1.下载依赖
npm install webpack-dev-server -D
2.配置
// 开发服务器
devServer:{
// 默认自动打开
open:true,
// 指定端口号
port:80,
// 指定主机地址
host:"127.0.0.1",
}
3.作用：打包完成后在浏览器中自动打开对应的网址
4.执行命令：npx webpack server
5.原理：监听src目录，一旦里面的内容发生变化，就自动打包。为了避免过多修改物理磁盘中的文件，打包后的文件是放在内存中的，用肉眼无法查看。
配置运行指令
修改package.json文件中的scripts
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack server --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
}
修改后：
- 开发模式：
npm run dev - 生产模式：
npm run build
CSS处理
提取CSS成单独文件
目前css文件被打包到js文件中，加载js文件会动态创建style标签，将样式引入。这样在网速慢时会出现闪屏，对用户体验不好，所以需要提取css成单独文件，通过link标签引入。
1.下载依赖
npm install mini-css-extract-plugin -D
2.配置
替换原来的'style-loader'
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename:'static/css/main.css'
})
],
};
处理CSS兼容性问题
1.下载依赖
npm install -D postcss-loader postcss postcss-preset-env
2.配置
webpack.prod.js中，在’css-loader’的下面添加配置
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
],
],
},
},
},
],
},
],
package.json中添加配置
{
"browserslist": [
"ie>=8"
]
}
3.查看打包后的文件
已经做了相应的兼容性处理
CSS压缩
1.下载依赖
npm install css-minimizer-webpack-plugin -D
2.配置
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins: [new CssMinimizerPlugin()],
};
注意：生产模式下，默认开启了html和js压缩
