Skip to content

Commit c735980

Browse files
author
yangfan19
committed
15-rem适配方案
1 parent 1e38c30 commit c735980

39 files changed

+20392
-0
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
# webpack 从零到一教程
22

3+
<br />
4+
35
## 本教程使用版本
46

57
```shell
68
webpack: "^4.31.0",
79
webpack-cli: "^3.3.2"
810
```
911

12+
<br />
13+
14+
## 目录
15+
1016
- [`webpack-01`](./webpack-01/README.md) &mdash; 一个简单的例子开始
1117
- [`webpack-02`](./webpack-02/README.md) &mdash; 多入口配置
1218
- [`webpack-03`](./webpack-03/README.md) &mdash; 日常使用的 loader 之 babel-loader

‎webpack-15/.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-15/.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-15/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# webpack-15
2+
3+
## css px 自动转换成 rem
4+
5+
```shell
6+
7+
npm i px2rem-loader raw-loader@0.5.1 -D
8+
npm i lib-flexible -S
9+
10+
```
11+
12+
执行以下的命令、生成的文件在 dist 文件夹中 自己手动创建 index.html 进行引入 search.js
13+
14+
```shell
15+
npm run build
16+
```
17+
18+
<br />
19+
20+
### 资源内联
21+
22+
- 页面框架的初始脚本
23+
- 上报相关的打点
24+
- css 内联避免页面的闪动
25+
- 减少 http 的网络请求，url-loader 原理一致
26+
27+
<br />
28+
29+
### 相关资源
30+
31+
[px2rem-loader](https://www.npmjs.com/package/px2rem-loader)
32+
33+
[lib-flexible](https://www.npmjs.com/package/lib-flexible)
34+
35+
<br />
36+
37+
### 其他
38+
39+
关于 vw\vh 的适配方案也可以参考搭建的轮子：
40+
41+
[vue-cli H5 适配 多页配置](https://github.com/yangfan-coder/amazing-vue-MultiplePages)
42+
43+
[react-react-app 适配方案](https://github.com/yangfan-coder/react-app-h5)

‎webpack-15/package-lock.json

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

‎webpack-15/package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 --config webpack.prod.js",
9+
"watch": "webpack --watch",
10+
"dev": "webpack-dev-server --open --config webpack.dev.js"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "ISC",
15+
"devDependencies": {
16+
"@babel/core": "^7.13.10",
17+
"@babel/preset-env": "^7.13.10",
18+
"@babel/preset-react": "^7.12.13",
19+
"autoprefixer": "^9.5.1",
20+
"babel-loader": "^8.2.2",
21+
"clean-webpack-plugin": "^3.0.0",
22+
"css-loader": "^5.1.2",
23+
"cssnano": "^4.1.10",
24+
"file-loader": "^6.2.0",
25+
"html-webpack-plugin": "^3.2.0",
26+
"less": "^4.1.1",
27+
"less-loader": "^5.0.0",
28+
"mini-css-extract-plugin": "^1.3.0",
29+
"optimize-css-assets-webpack-plugin": "^5.0.4",
30+
"postcss-loader": "^3.0.0",
31+
"px2rem-loader": "^0.1.9",
32+
"raw-loader": "^0.5.1",
33+
"react": "^17.0.1",
34+
"react-dom": "^17.0.1",
35+
"style-loader": "^2.0.0",
36+
"url-loader": "^4.1.1",
37+
"webpack": "^4.31.0",
38+
"webpack-cli": "^3.3.2"
39+
},
40+
"dependencies": {
41+
"lib-flexible": "^0.3.2",
42+
"webpack-dev-server": "^3.11.2"
43+
}
44+
}

‎webpack-15/src/fonts/KsoTouryu_5.otf

22.3 MB
Binary file not shown.

‎webpack-15/src/fonts/Ranchers-Regular.ttf

134 KB
Binary file not shown.

‎webpack-15/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-15/src/images/Ranchers-Regular.ttf

134 KB
Binary file not shown.

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

34.1 KB
Loading

‎webpack-15/src/index.html

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

‎webpack-15/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-15/src/meta.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- 公共的 meta信息-->
2+
<meta charset="UTF-8" />
3+
<meta name="viewport"
4+
content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no,viewport-fit=cover" />
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

‎webpack-15/src/search.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@font-face {
2+
font-family: 'KsoTouryu_5';
3+
src: url('./fonts/KsoTouryu_5.otf') format('truetype');
4+
}
5+
6+
.box {
7+
font-size: 100px;
8+
color: red;
9+
font-family: 'KsoTouryu_5';
10+
}

‎webpack-15/src/search.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
${require('raw-loader!./meta.html')}
6+
<title>index</title>
7+
<script>${ require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') }</script>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
</body>
13+
14+
</html>

‎webpack-15/src/search.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
import logo from './images/im1.jpg';
9+
10+
const Search = () => {
11+
return (
12+
<div className='box'>
13+
我是新的组件
14+
<img src={logo} />
15+
</div>
16+
);
17+
};
18+
19+
ReactDOM.render(<Search />, document.getElementById('root'));

‎webpack-15/src/search01.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.box {
2+
font-size: 200px;
3+
color: blue;
4+
font-family: 'Ranchers-Regular';
5+
display: flex;
6+
}

‎webpack-15/webpack.dev.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
const webpack = require('webpack');
5+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
6+
7+
module.exports = {
8+
entry: {
9+
// 入口文件可以用对象的形式来写
10+
index: './src/index.js',
11+
search: './src/search.js',
12+
},
13+
output: {
14+
path: path.join(__dirname, 'dist'),
15+
filename: '[name].js', // 多个入口的情况下 不知道对应的名称、可以用占位符来指定[name]
16+
},
17+
mode: 'development',
18+
module: {
19+
rules: [
20+
{
21+
test: /.js$/,
22+
use: 'babel-loader',
23+
},
24+
{
25+
test: /.css$/, // 配置css的后缀名
26+
use: ['style-loader', 'css-loader'], //tips:执行的顺序是右到左的
27+
},
28+
{
29+
test: /.less$/, // 配置less的后缀名
30+
use: ['style-loader', 'css-loader', 'less-loader'], //tips:执行的顺序是右到左的
31+
},
32+
{
33+
test: /.(png|jpg|gif|jpeg)$/,
34+
use: [
35+
{
36+
loader: 'url-loader',
37+
options: {
38+
limit: 102400, // 100k
39+
},
40+
},
41+
],
42+
},
43+
{
44+
test: /.(woff|woff2|eot|ttf|otf)$/,
45+
use: 'file-loader',
46+
},
47+
],
48+
},
49+
plugins: [new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin()],
50+
devServer: {
51+
contentBase: './dist',
52+
hot: true,
53+
},
54+
};

‎webpack-15/webpack.prod.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
const MiniCssExtractplugin = require('mini-css-extract-plugin'); // 提取css单独一个文件
5+
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
6+
const HtmlWebpackPlugin = require('html-webpack-plugin');
7+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
8+
9+
module.exports = {
10+
entry: {
11+
// 入口文件可以用对象的形式来写
12+
index: './src/index.js',
13+
search: './src/search.js',
14+
},
15+
output: {
16+
path: path.join(__dirname, 'dist'),
17+
filename: '[name]_[chunkhash:8].js', // chunkhash 8位的长度
18+
},
19+
mode: 'production',
20+
module: {
21+
rules: [
22+
{
23+
test: /.js$/,
24+
use: 'babel-loader',
25+
},
26+
{
27+
test: /.css$/, // 配置css的后缀名
28+
use: [MiniCssExtractplugin.loader, 'css-loader'], //tips:执行的顺序是右到左的
29+
},
30+
{
31+
test: /.less$/, // 配置less的后缀名
32+
use: [
33+
MiniCssExtractplugin.loader,
34+
'css-loader',
35+
'less-loader',
36+
{
37+
loader: 'postcss-loader',
38+
options: {
39+
plugins: [
40+
require('autoprefixer')({
41+
browsers: [
42+
//浏览器列表
43+
'ie>=8',
44+
'Firefox>=20',
45+
'Safari>=5',
46+
'Android>=4',
47+
'Ios>=6',
48+
'last 4 version',
49+
],
50+
}),
51+
],
52+
},
53+
},
54+
{
55+
loader: 'px2rem-loader',
56+
options: {
57+
remUnit: 75,
58+
remPrecision: 8,
59+
},
60+
},
61+
], //tips:执行的顺序是右到左的
62+
},
63+
{
64+
test: /.(png|jpg|gif|jpeg)$/,
65+
use: [
66+
{
67+
loader: 'file-loader',
68+
options: {
69+
name: '[name]_[hash:8].[ext]',
70+
},
71+
},
72+
],
73+
},
74+
{
75+
test: /.(woff|woff2|eot|ttf|otf)$/,
76+
use: [
77+
{
78+
loader: 'file-loader',
79+
options: {
80+
name: '[name]_[hash:8].[ext]',
81+
},
82+
},
83+
],
84+
},
85+
],
86+
},
87+
plugins: [
88+
new MiniCssExtractplugin({
89+
filename: '[name]_[contenthash:8].css',
90+
}),
91+
new OptimizeCssAssetsWebpackPlugin({
92+
assetNameRegExp: /.css$/g,
93+
cssProcessor: require('cssnano'),
94+
}),
95+
new HtmlWebpackPlugin({
96+
template: path.join(__dirname, 'src/search.html'),
97+
filename: 'search.html',
98+
chunks: ['search'],
99+
inject: true,
100+
minify: {
101+
html5: true,
102+
collapseWhitespace: true,
103+
preserveLineBreaks: false,
104+
minifyCSS: true,
105+
minifyJS: true,
106+
removeComments: false,
107+
},
108+
}),
109+
new HtmlWebpackPlugin({
110+
template: path.join(__dirname, 'src/index.html'),
111+
filename: 'index.html',
112+
chunks: ['index'],
113+
inject: true,
114+
minify: {
115+
html5: true,
116+
collapseWhitespace: true,
117+
preserveLineBreaks: false,
118+
minifyCSS: true,
119+
minifyJS: true,
120+
removeComments: false,
121+
},
122+
}),
123+
new CleanWebpackPlugin(),
124+
],
125+
};

0 commit comments

Comments
 (0)