网页中有哪些静态资源
- JS
- .js .jsx .coffee .ts
- CSS
- .css .less .scss
- Images
- .jpg .png .gif .bmp .svg
- 字体文件
- .svg .ttf .eot .woff .woff2
- 模板文件
- 网页加载速度慢，因为我们要发起很多的二次请求
- 要处理错综复杂的依赖关系
处理静态资源加载的问题
- 合并、压缩js.css文件
- 处理图片请求的时候，可以将图片设置成base64编码，这样会随着html结构一起加载
- 处理依赖关系，使用Gulp webpack
什么是webpack
webpack 是前端的一个项目构建工具，它是基于node.js开发出来的一个前端工具
导入导出方式
1.node:
- exports:导出
exports.obj = obj - require:导入
let www = require('./a.js')1
2
3
4
5
6
7
8
9
10
11
12//a.js 文件
let str = '哈哈哈'
let obj = {
qqq:12
}
exports.str = str
exports.obj = obj
// index.js 文件
let www = require('./a.js')
console.log(www)
输出: str obj
2.es6(ECMAscript2015):
1).export + import1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16这种导出方式,在引入时,变量名需要跟导出的名字保持一致
//a.js
export let str = '哈哈哈'
export let obj = {
qqq:12
}
or:
export {str,obj}
import {str,obj} from './a.js'
es6解构语法
--------------------------------------------------
// index.js
import * as aaa from './a.js'
console.log(aaa)
输出: str obj
这种导入方式，我们可以自定义导入接口的名字
2).export default + import1
2
3
4
5
6//a.js
let str = '哈哈哈';
export default str;
//默认导出 str
import www from './a.js'
这种导入方式也可以自定义接口名字
webpack4配置文件
webpack.config.js 入口、调试配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43const path = require('path');
const pluginsConfig = require("./webpack.plguins.js");
const rulesConfig = require("./webpack.rules.js");
module.exports = {
entry: {
// 多入口文件
a: './src/js/index.js',
b: './src/js/index2.js',
jquery: 'jquery'
},
output: {
path:path.resolve(__dirname, 'dist'),
// 打包多出口文件
// 生成 a.bundle.js b.bundle.js jquery.bundle.js
filename: './js/[name].bundle.js'
},
plugins: pluginsConfig,
devServer: {
contentBase: path.resolve(__dirname, "dist"),
host: "localhost",
port: "8090",
open: true, // 开启浏览器
hot: true // 开启热更新
},
// devtool: "source-map", // 开启调试模式
module:{
rules: rulesConfig
},
// 提取js，lib1名字可改
optimization: {
splitChunks: {
cacheGroups: {
lib1: {
chunks: "initial",
name: "jquery",
enforce: true
}
}
}
}
}webpack.plugins.js 插件配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50const webpack = require("webpack");
const path = require('path');
const glob = require("glob");
//消除冗余的css
const purifyCssWebpack = require("purifycss-webpack");
// html模板
const htmlWebpackPlugin = require("html-webpack-plugin");
// 清除目录等
const cleanWebpackPlugin = require("clean-webpack-plugin");
//4.x之前用以压缩
const uglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
// 分离css
const extractTextPlugin = require("extract-text-webpack-plugin");
//静态资源输出
const copyWebpackPlugin = require("copy-webpack-plugin");
module.exports = [
new webpack.HotModuleReplacementPlugin(),
// 调用之前先清除
new cleanWebpackPlugin(["dist"]),
// 4.x之前可用uglifyjs-webpack-plugin用以压缩文件，4.x可用--mode更改模式为production来压缩文件
// new uglifyjsWebpackPlugin(),
new copyWebpackPlugin([{
from: path.resolve(__dirname,"src/assets"),
to: './pulic'
}]),
// 分离css插件参数为提取出去的路径
new extractTextPlugin("css/index.css"),
// 消除冗余的css代码
new purifyCssWebpack({
// glob为扫描模块，使用其同步方法
paths: glob.sync(path.join(__dirname, "src/*.html"))
}),
// 全局暴露统一入口
new webpack.ProvidePlugin({
$: "jquery"
}),
// 自动生成html模板
new htmlWebpackPlugin({
filename: "index.html",
title: "xxxx",
chunks: ['a',"jquery"], // 按需引入对应名字的js文件
template: "./src/index.html"
}),
new htmlWebpackPlugin({
chunks: ['b'],
filename: "index2.html",
title: "page2",
template: "./src/index2.html"
})
]webpack.rules.js 解析模块配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71const extractTextPlugin = require("extract-text-webpack-plugin");
module.exports = [
{
test: /\.css$/,
// 不分离的写法
// use: ["style-loader", "css-loader"]
// 使用postcss不分离的写法
// use: ["style-loader", "css-loader", "postcss-loader"]
// 此处为分离css的写法
/*use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader",
// css中的基础路径
publicPath: "../"
})*/
// 此处为使用postcss分离css的写法
use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"],
// css中的基础路径
publicPath: "../"
})
},
{
test: /\.js$/,
use: ["babel-loader"],
// 不检查node_modules下的js文件
exclude: "/node_modules/"
},
{
test: /\.(png|jpg|gif)$/,
use: [{
// 需要下载file-loader和url-loader
loader: "url-loader",
options: {
limit: 50,
// 图片文件输出的文件夹
outputPath: "images"
}
}
]
},
{
test: /\.html$/,
// html中的img标签
use: ["html-withimg-loader"]
},
{
test: /\.less$/,
// 三个loader的顺序不能变
// 不分离的写法
// use: ["style-loader", "css-loader", "less-loader"]
// 分离的写法
use: extractTextPlugin.extract({
fallback:"style-loader",
use: ["css-loader", "less-loader"]
})
},
{
test: /\.(scss|sass)$/,
// sass不分离的写法，顺序不能变
// use: ["style-loader", "css-loader", "sass-loader"]
// 分离的写法
use: extractTextPlugin.extract({
fallback:"style-loader",
use: ["css-loader", "sass-loader"]
})
}
]