什么是webpack
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图 ,然后将你项目中所需的每一个模块组合成一个或多个 bundles ,它们均为静态资源,用于展示你的内容
- 打包: 将不同类型的资源按模块处理进行打包
- 静态:打包最终产出静态资源
- 模块:webpack 支持不同规范的模块化开发,如 ES Module、CommonJS 等可同时使用
安装 webpack
注意:全局安装可以直接使用 webpack 命令打包,但不推荐,避免将项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中, 可能会导致构建失败。
1、安装 webpack 和 webpack-cli, webpack-cli 是在 node 下运行所必须的
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2、修改 package.json,增加"build": "webpack"
这里可以自行设置入口和出口,如 webpack --entry ./src/main.js --output-path ./build
{
"name": "learn-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
3、运行 webpack 进行打包
npm run build
CSS loader
为什么需要 loader
默认情况下无法处理 css 、 less 文件,需要对文件进行转换,loader 就是起到一个转换的作用
css-loader 、 style-loader 、less-loader
css 并非 js 模块, 需要使用 css-loader 识别模块并解析出依赖关系, style-loader 才可以解析并生成样式
安装 css-loader 、 style-loader 、 less-loader
npm i css-loader -D
npm i style-loader -D
npm i less-loader -D
行内 css-loader
import "css-loader!../css/example.css";
配置文件中使用 css-loader 、 style-loader 、和 less-loader
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/, // 一般是匹配我们所需要处理的文件类型正则表达式
use: [
// 注意顺序,需先添加 style-loader 才能解析样式
// 按从上往下或从右往左顺序执行
// 未配置 options 可简写未 use: ['style-loader', 'css-loader']
{
loader: "style-loader",
},
{
loader: "css-loader",
},
],
},
// 下面采用简写方式
{
test: /\.less$/,
// 这里还是需要添加 css-loader
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
};
browserslistrc
为什么需要 browserslistrc
目前前端开发均采用工程化方式,不仅需要考虑对各类工具包的兼容性,需要考虑浏览器对 CSS 语法、 JS 语法的兼容性,browserslistrc 可以帮助我们完成目标环境配置。 browserslist 单独是没用的,需要结合 bable 、 autoprefixer 等工具来确定需转译的 JS 特性和需要添加的 CSS 浏览器前缀。它的查询数据来源于 Can I Use
配置 browserslistrc
package.json 增加如下代码,表示兼容市场占有率大于 1% 或最新两个版本或最近24个月有更新维护的浏览器
{
"browserslist": [
">1%",
"last 2 versions",
"not dead",
"not ie <= 8"
]
}
或
添加 .browerslistrc 配置文件书写如下代码
> 1%
last 2 versions
not dead
not ie <= 8
postcss
一个通过 JS 来转换样式的工具,以达到兼容性
安装 postcss
要在命令行中使用 postcss 还需安装 postcss-cli ,并安装 autoprefixer 添加前缀,最后生成待前缀的 css
npm i postcss -D
npm i postcss-cli -D
npx i autoprefixer -D
npx postcss --use autoprefixer -o ret.css ./src/css/test.css
postcss-loader
应该放在 css-loader 之前加载,以加上前缀
{
loader: "postcss-loader",
options: {
postcssOptions: {
// plugins: [require("autoprefixer")],
// postcss-preset-env 是一个预设——插件集合
// 包含了autoprefixer,支持简写,当然 autoprefixer 也支持简写
plugins: ["postcss-preset-env"],
},
}
}
// 顺序 [style-loader, css-loader, postcss-loader]
importLoaders 属性
在一个 css 文件中导入另一个 css 文件来使用其中的样式时,由于 css 被匹配到后 postcss-loader 先进行工作添加前缀,然后再把代码传递给 css-loader , css-loader 可以处理 @import 导入的内容或者 @import meida 、 url 之类的内容,但并不会再回头交给 postcss-loader 处理,而是直接交给 style-loader 进行展示,这样我们就需要用到 importLoaders 属性指定配置的 css-loader 作用于 @import 的资源之前有多少个 loader
{
loader: "css-loader",
options: {
importLoaders: 1,
},
}
File loader
安装 file-load
npm i file-load -d
使用 file-load
使用 file-loader 会在 /dist 目录中生成导出的图片,他会把文件名称、路径返回并拷贝到打包目录,还要分开请求图片,请求次数变多
img 标签中的图片
// 添加图片
function pckImg() {
const oEle = document.createElement("div");
const oImg = document.createElement("img");
oImg.src = require("../img/webpack.png").default; // webpack5 得加 default
oEle.appendChild(oImg);
return oEle;
}
document.body.appendChild(pckImg());
// 配置 webpack rules
{
test: /\.(png|svg|gif|jpg|jpeg)$/,
use: ["file-loader"],
},
// 不使用 .default 的方法一
use: [
{
loader: "file-loader",
options: {
esModule: false, // 是否将导出的内容转为 esModule
},
},
],
// 不使用 .default 的方法二
import oImgSrc from "../img/webpack.png"
function pckImg() {
const oEle = document.createElement("div");
const oImg = document.createElement("img");
oImg.src = oImgSrc;
oEle.appendChild(oImg);
return oEle;
}
document.body.appendChild(pckImg());
背景图片
// 添加盒子及 css
import "../css/img.css";
function pckImg()