个人博客:
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>