Skip to content

Commit abc75be

Browse files
author
yangfan19
committed
增加解析字体、图片配置
1 parent b5729ab commit abc75be

27 files changed

+12036
-0
lines changed

‎webpack-06/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎webpack-06/.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/idea
6+
/dist
7+
/es
8+
/lib
9+
10+
# misc
11+
.idea
12+
.vscode
13+
.DS_Store
14+
15+
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*

‎webpack-06/README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# webpack-06
2+
3+
## 解析文件图片
4+
5+
执行以下的命令、生成的文件在dist文件夹中 自己手动创建index.html 进行引入search.js
6+
```shell
7+
npm run build
8+
```
9+
————
10+
### loaders和的Plugins使用
11+
————
12+
#### 日常使用的loader
13+
14+
```shell
15+
babel-loader // 转换ES6、ES7新特性的语法
16+
css-lodder // 支持.css文件的加载和解析
17+
less-lodder // 支持.less文件转成css
18+
ts-lodder // 将TS转成js
19+
file-lodder // 将图片、字体等打包
20+
file-lodder // 将图片、字体等打包
21+
raw-lodder // 将文件已字符串的形式导入
22+
thead-lodder // 多进程打包JS和css
23+
```
24+
25+
### Plugins的使用
26+
————
27+
#### 日常使用的Plugins
28+
29+
```shell
30+
CommonsChunkPlugin // 将chunks相同的模块代码提取成公共的js
31+
CleanWebpackPlugin // 清理构建目录
32+
ExtractTextWebpackPlugin // 将css从bunlde文件里提取到一个独立的css文件
33+
CopyWebpackPlugin // 将文件或者文件夹拷贝到构建的输出目录
34+
HtmlWebpackPlugin // 创建html文件去承载输出到bundle
35+
UglifyjsWebpackPligin // 压缩JS
36+
ZipWebpackPlugin // 将打包出的资源生成一个zip的包
37+
```
38+
39+
————
40+
## loader和 Plugins的区别？
41+
42+
loader不能做的事情Plugin都能干
43+
44+
45+

‎webpack-06/package-lock.json

Lines changed: 5847 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webpack-06/package.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "webpack-01",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"build": "webpack"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"@babel/core": "^7.13.10",
15+
"@babel/preset-env": "^7.13.10",
16+
"@babel/preset-react": "^7.12.13",
17+
"babel-loader": "^8.2.2",
18+
"css-loader": "^5.1.2",
19+
"file-loader": "^6.2.0",
20+
"less": "^4.1.1",
21+
"less-loader": "^5.0.0",
22+
"react": "^17.0.1",
23+
"react-dom": "^17.0.1",
24+
"style-loader": "^2.0.0",
25+
"webpack": "^4.31.0",
26+
"webpack-cli": "^3.3.2"
27+
}
28+
}

‎webpack-06/src/helloWorld.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function helloworld() {
2+
return 'Hello webpack';
3+
}

‎webpack-06/src/images/im1.jpg

34.1 KB
Loading

‎webpack-06/src/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { helloworld } from './helloWorld';
2+
3+
document.write(helloworld());

‎webpack-06/src/search.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.box {
2+
font-size: 100px;
3+
color: red;
4+
}

‎webpack-06/src/search.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
6+
// import './search.css';
7+
import './search01.less';
8+
9+
import logo from './images/im1.jpg';
10+
11+
const Search = () => {
12+
return (
13+
<div className='box'>
14+
我是search组件
15+
<img src={logo} />
16+
</div>
17+
);
18+
};
19+
20+
ReactDOM.render(<Search />, document.getElementById('root'));

‎webpack-06/src/search01.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.box {
2+
font-size: 200px;
3+
color: blue;
4+
}

‎webpack-06/webpack.config.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
5+
module.exports = {
6+
entry: {
7+
// 入口文件可以用对象的形式来写
8+
index: './src/index.js',
9+
search: './src/search.js',
10+
},
11+
output: {
12+
path: path.join(__dirname, 'dist'),
13+
filename: '[name].js', // 多个入口的情况下 不知道对应的名称、可以用占位符来指定[name]
14+
},
15+
mode: 'production',
16+
module: {
17+
rules: [
18+
{
19+
test: /.js$/,
20+
use: 'babel-loader',
21+
},
22+
{
23+
test: /.css$/, // 配置css的后缀名
24+
use: ['style-loader', 'css-loader'], //tips:执行的顺序是右到左的
25+
},
26+
{
27+
test: /.less$/, // 配置less的后缀名
28+
use: ['style-loader', 'css-loader', 'less-loader'], //tips:执行的顺序是右到左的
29+
},
30+
{
31+
test: /.(png|jpg|gif|jpeg)$/,
32+
use: 'file-loader',
33+
},
34+
],
35+
},
36+
};

‎webpack-07/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎webpack-07/.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/idea
6+
/dist
7+
/es
8+
/lib
9+
10+
# misc
11+
.idea
12+
.vscode
13+
.DS_Store
14+
15+
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*

‎webpack-07/README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# webpack-07
2+
3+
## 解析字体
4+
5+
执行以下的命令、生成的文件在dist文件夹中 自己手动创建index.html 进行引入search.js
6+
```shell
7+
npm run build
8+
```
9+
————
10+
### loaders和的Plugins使用
11+
————
12+
#### 日常使用的loader
13+
14+
```shell
15+
babel-loader // 转换ES6、ES7新特性的语法
16+
css-lodder // 支持.css文件的加载和解析
17+
less-lodder // 支持.less文件转成css
18+
ts-lodder // 将TS转成js
19+
file-lodder // 将图片、字体等打包
20+
file-lodder // 将图片、字体等打包
21+
raw-lodder // 将文件已字符串的形式导入
22+
thead-lodder // 多进程打包JS和css
23+
```
24+
25+
### Plugins的使用
26+
————
27+
#### 日常使用的Plugins
28+
29+
```shell
30+
CommonsChunkPlugin // 将chunks相同的模块代码提取成公共的js
31+
CleanWebpackPlugin // 清理构建目录
32+
ExtractTextWebpackPlugin // 将css从bunlde文件里提取到一个独立的css文件
33+
CopyWebpackPlugin // 将文件或者文件夹拷贝到构建的输出目录
34+
HtmlWebpackPlugin // 创建html文件去承载输出到bundle
35+
UglifyjsWebpackPligin // 压缩JS
36+
ZipWebpackPlugin // 将打包出的资源生成一个zip的包
37+
```
38+
39+
————
40+
## loader和 Plugins的区别？
41+
42+
loader不能做的事情Plugin都能干
43+
44+
45+

0 commit comments

Comments
 (0)