Skip to content

Commit 870fe50

Browse files
zhangyue0503zhangyue0503
committed
webpack
1 parent 51fac19 commit 870fe50

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+15984
-0
lines changed

‎webpack/02-setup-app/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<script src="./dist/bundle.js"></script>
11+
</body>
12+
</html>

‎webpack/02-setup-app/package-lock.json

+1,244
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webpack/02-setup-app/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "02-setup-app",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"html-webpack-plugin": "^5.5.0",
14+
"webpack": "^5.75.0",
15+
"webpack-cli": "^5.0.1"
16+
}
17+
}

‎webpack/02-setup-app/src/hello-world.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function helloWorld(){
2+
console.log('Hello World')
3+
}
4+
5+
export default helloWorld

‎webpack/02-setup-app/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import helloWorld from "./hello-world"
2+
3+
helloWorld()

‎webpack/02-setup-app/webpack.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
entry:'./src/index.js',
5+
output:{
6+
filename:"bundle.js",
7+
path: path.resolve(__dirname, "./dist")
8+
},
9+
mode: "none"
10+
}

‎webpack/03-manage-output/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
</body>
11+
</html>

‎webpack/03-manage-output/src/hello-world.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function helloWorld(){
2+
console.log('Hello World')
3+
}
4+
5+
export default helloWorld

‎webpack/03-manage-output/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import helloWorld from "./hello-world"
2+
3+
helloWorld()

‎webpack/03-manage-output/webpack.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const path = require('path')
2+
const HtmlWebpackPlugin = require('html-webpack-plugin')
3+
module.exports = {
4+
entry:'./src/index.js',
5+
output:{
6+
filename:"bundle.js",
7+
path: path.resolve(__dirname, "./dist"),
8+
clean:true
9+
},
10+
mode: "none",
11+
plugins:[
12+
new HtmlWebpackPlugin({
13+
template:'./index.html',
14+
filename:'app.html',
15+
inject:'body'
16+
})
17+
]
18+
}

‎webpack/04-development/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
</body>
11+
</html>

‎webpack/04-development/src/hello-world.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function helloWorld(){
2+
console.log('Hello World!!@111')
3+
}
4+
5+
export default helloWorld

‎webpack/04-development/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import helloWorld from "./hello-world"
2+
3+
helloWorld()

‎webpack/04-development/webpack.config.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const path = require('path')
2+
const HtmlWebpackPlugin = require('html-webpack-plugin')
3+
module.exports = {
4+
entry:'./src/index.js',
5+
output:{
6+
filename:"bundle.js",
7+
path: path.resolve(__dirname, "./dist"),
8+
clean:true
9+
},
10+
mode: "development",
11+
devtool:'inline-source-map',
12+
plugins:[
13+
new HtmlWebpackPlugin({
14+
template:'./index.html',
15+
filename:'app.html',
16+
inject:'body'
17+
})
18+
],
19+
devServer:{
20+
static:'./dist'
21+
}
22+
}

‎webpack/05-asset-modules/assets/a.txt

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
无敌了吧
2+
别

‎webpack/05-asset-modules/assets/bg.png

25 KB
Loading

‎webpack/05-asset-modules/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
</body>
11+
</html>

‎webpack/05-asset-modules/src/hello-world.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function helloWorld(){
2+
console.log('Hello World!!@111')
3+
}
4+
5+
export default helloWorld

‎webpack/05-asset-modules/src/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import helloWorld from "./hello-world"
2+
import imgsrc from '../assets/bg.png'
3+
import txtsrc from '../assets/a.txt'
4+
5+
helloWorld()
6+
7+
const img = document.createElement('img')
8+
img.src = imgsrc
9+
document.body.appendChild(img)
10+
11+
const block = document.createElement('div')
12+
block.textContent = txtsrc
13+
document.body.appendChild(block)

‎webpack/05-asset-modules/webpack.config.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const path = require('path')
2+
const HtmlWebpackPlugin = require('html-webpack-plugin')
3+
module.exports = {
4+
entry:'./src/index.js',
5+
output:{
6+
filename:"bundle.js",
7+
path: path.resolve(__dirname, "./dist"),
8+
clean:true,
9+
assetModuleFilename:'images/[contenthash][ext]'
10+
},
11+
mode: "development",
12+
devtool:'inline-source-map',
13+
plugins:[
14+
new HtmlWebpackPlugin({
15+
template:'./index.html',
16+
filename:'app.html',
17+
inject:'body'
18+
})
19+
],
20+
devServer:{
21+
static:'./dist'
22+
},
23+
module:{
24+
rules:[
25+
// {
26+
// test:/\.png$/,
27+
// type:'asset/inline',
28+
// generator:{
29+
// filename:'images/[contenthash][ext]'
30+
// }
31+
// }
32+
// {
33+
// test:/\.png$/,
34+
// type:'asset/inline'
35+
// },
36+
{
37+
test:/\.png$/,
38+
type:'asset'
39+
},
40+
{
41+
test:/\.txt$/,
42+
type:'asset/source'
43+
}
44+
]
45+
}
46+
}

‎webpack/06-loader/assets/a.txt

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
无敌了吧
2+
别

‎webpack/06-loader/assets/bg.png

25 KB
Loading

‎webpack/06-loader/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
</body>
11+
</html>

‎webpack/06-loader/src/hello-world.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function helloWorld(){
2+
console.log('Hello World!!@111')
3+
}
4+
5+
export default helloWorld

‎webpack/06-loader/src/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import helloWorld from "./hello-world"
2+
import imgsrc from '../assets/bg.png'
3+
import txtsrc from '../assets/a.txt'
4+
import './style.css'
5+
import './style.less'
6+
7+
helloWorld()
8+
9+
const img = document.createElement('img')
10+
img.src = imgsrc
11+
document.body.appendChild(img)
12+
13+
const block = document.createElement('div')
14+
block.textContent = txtsrc
15+
document.body.appendChild(block)
16+
17+
document.body.classList.add('hello')

‎webpack/06-loader/src/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.hello{
2+
color:red;
3+
}

‎webpack/06-loader/src/style.less

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@color:red;
2+
body{
3+
background-color: @color;
4+
}

‎webpack/06-loader/webpack.config.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
const path = require('path')
2+
const HtmlWebpackPlugin = require('html-webpack-plugin')
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
5+
module.exports = {
6+
entry:'./src/index.js',
7+
output:{
8+
filename:"bundle.js",
9+
path: path.resolve(__dirname, "./dist"),
10+
clean:true,
11+
assetModuleFilename:'images/[contenthash][ext]'
12+
},
13+
// mode: "development",
14+
mode:"production",
15+
devtool:'inline-source-map',
16+
plugins:[
17+
new HtmlWebpackPlugin({
18+
template:'./index.html',
19+
filename:'app.html',
20+
inject:'body'
21+
}),
22+
new MiniCssExtractPlugin({
23+
filename:'styles/[contenthash].css'
24+
})
25+
],
26+
devServer:{
27+
static:'./dist'
28+
},
29+
module:{
30+
rules:[
31+
// {
32+
// test:/\.png$/,
33+
// type:'asset/inline',
34+
// generator:{
35+
// filename:'images/[contenthash][ext]'
36+
// }
37+
// }
38+
// {
39+
// test:/\.png$/,
40+
// type:'asset/inline'
41+
// },
42+
{
43+
test:/\.png$/,
44+
type:'asset'
45+
},
46+
{
47+
test:/\.txt$/,
48+
type:'asset/source'
49+
},
50+
{
51+
test:/\.(css|less)$/,
52+
// use:['style-loader','css-loader', 'less-loader']
53+
use:[MiniCssExtractPlugin.loader,'css-loader', 'less-loader']
54+
}
55+
]
56+
},
57+
optimization:{
58+
minimizer:[
59+
new CssMinimizerPlugin()
60+
]
61+
}
62+
}

‎webpack/07-babel-loader/assets/a.txt

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
无敌了吧
2+
别

‎webpack/07-babel-loader/assets/bg.png

25 KB
Loading

‎webpack/07-babel-loader/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
</body>
11+
</html>

‎webpack/07-babel-loader/src/hello-world.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
3+
function getString(){
4+
return new Promise((resolve, reject)=>{
5+
setTimeout(()=>{
6+
resolve("Hello World!!!")
7+
},2000)
8+
})
9+
}
10+
11+
12+
async function helloWorld(){
13+
let string = await getString()
14+
console.log(string)
15+
}
16+
17+
export default helloWorld

0 commit comments

Comments
 (0)