个人博客:
http://www.milovetingting.cn

Webpack简单使用

1、在项目根目录安装Webpack

1
npm install webpack webpack-cli --save-dev

2、创建一个配置文件 webpack.config.js,用于配置 Webpack 的各种选项。以下是一个基本的配置文件示例:

1
2
3
4
5
6
7
8
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};

在这个配置文件中,设置了入口文件 ./src/index.js,输出文件为 ./dist/bundle.js

3、在HTML 文件中引入打包后的 JavaScript 文件。

1
<script src="dist/bundle.js"></script>

4、运行Webpack打包命令。

1
npx webpack --config webpack.config.js

这将会运行 Webpack 并使用配置文件打包应用程序。打包后的文件将会被输出到在配置文件中设置的输出目录中。

以上为Webpack使用的基本步骤,下面以使用compressorjs为例,展示简单的图片压缩功能

图片压缩

1、导入compressorjs

1
npm install compressorjs

2、编辑index.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
import Compressor from 'compressorjs';

document.getElementById('file').addEventListener('change', (e) => {
//获取选择的文件
const file = e.target.files[0];

if (!file) {
return;
}

//压缩
new Compressor(file, {
//压缩质量
quality: 0.6,
success(result) {
//成功的回调
console.log(result.name);
//reader
var fileReader = new FileReader();
//读取数据成功的回调
fileReader.onload = function (event) {
//设置图片的src
document.getElementById('img').src = event.target.result;
//获取下载按钮
var alink = document.getElementById('download');
//设置下载按钮的链接
alink.href = event.target.result;
//设置下载按钮的数据
alink.download = result.name;
//设置可见
alink.style.display='block';
};
//读取数据
fileReader.readAsDataURL(result);
},
error(err) {
//失败的回调
console.log(err.message);
},
});

});

3、index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片压缩</title>
</head>

<body>
<input type="file" id="file" accept="image/*">
<br /><br />
<img id="img" width="200" height="300" style="object-fit:cover" />
<br /><br />
<a id="download" style="display:none;">下载</a>
</body>
<script src="dist/bundle.js"></script>

</html>