webpack默认打包
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script src="./src/index.js" type="module"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>
index.js
import { sum, mul } from './js/math.js';
const { dateFormat, priceFormat } = require('./js/format');
console.log(sum(20, 30));
console.log(mul(20, 30));
console.log(dateFormat("1213"));
console.log(priceFormat("1213"));
format.js
const dateFormat = (date) => {
return "2020-12-12";
}
const priceFormat = (price) => {
return "100.00";
}
module.exports = {
dateFormat,
priceFormat
}
math.js
export const sum = (num1, num2) => {
return num1 + num2;
}
export const mul = (num1, num2) => {
return num1 * num2;
}
webpack默认打包
Webpack配置文件
wk.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
},
mode: 'development',
}
指定配置文件
Webpack依赖图
编写案例代码
css-loader的使用
css-loader的使用方案
loader配置方式
Loader的配置代码
认识style-loader
配置style-loader
如何处理less文件？
Less工具处理
less-loader处理
浏览器兼容性
浏览器市场占有率
我们工具通常会查询的一个网站就是caniuse；
https://caniuse.com/usage-table
认识browserslist工具
浏览器查询过程
Browserslist编写规则
命令行使用browserslist
windows系统不需要加后面的参数，只需要写npx browserslist即可。
配置browserslist
默认配置和条件关系
认识PostCSS工具
命令行使用postcss
插件autoprefixer
postcss-loader
单独的postcss配置文件
postcss-preset-env
举个例子
目录结构
wk.config.js
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build")
},
module: {
rules: [
{
// 规则使用正则表达式
test: /.css$/, // 匹配资源
use: [
// { loader: "css-loader" },
// 注意: 编写顺序(从下往上, 从右往做, 从后往前)
"style-loader",
// 为了回头处理@import的css文件，写成对象
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
],
// loader: "css-loader"
},
{
test: /.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// @import的css文件，回头能被前面的"less-loader"、"postcss-loader"处理
importLoaders: 2
}
},
"postcss-loader",
"less-loader"
]
}
]
}
}
main.js
import { sum, mul } from './js/math.js';
const { dateFormat, priceFormat } = require('./js/format');
import "./js/test";
import "./js/component";
console.log(sum(20, 30));
console.log(mul(20, 30));
console.log(dateFormat("1213"));
console.log(priceFormat("1213"));
.browserslistrc
>1%
last 2 version
not dead
postcss.config.js
module.exports = {
plugins: [
'postcss-preset-env'
]
}
package.json
{
"name": "01_learn_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config wk.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.3",
"css-loader": "^5.0.1",
"less": "^4.1.0",
"less-loader": "^7.2.1",
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"webpack": "^5.14.0",
"webpack-cli": "^4.3.1"
}
}
component.js
// import "css-loader!../css/index.css";
import "../css/index.css";
import "../css/component.less";
function component() {
const element = document.createElement("div");
element.innerHTML = ["Hello", "Webpack"].join(" ");
element.className = "content";
return element;
}
document.body.appendChild(component());
component.less
@fontSize: 50px;
@fontWeight: 700;
.content {
font-size: @fontSize;
font-weight: @fontWeight;
}
index.css
@import "./test.css";
.demo {
color: red;
}
test.css
.content {
/* 十六进制通常是写几位 */
color: #12345678;
}
:fullscreen {
color: red;
}
.content {
user-select: none;
transition: all 2s ease;
}