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;
}