Webpack简单使用
1、在项目根目录安装Webpack
npm install webpack webpack-cli --save-dev
2、创建一个配置文件 webpack.config.js，用于配置 Webpack 的各种选项。以下是一个基本的配置文件示例：
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文件。
<script src="dist/bundle.js"></script>
4、运行Webpack打包命令。
npx webpack --config webpack.config.js
这将会运行Webpack 并使用配置文件打包应用程序。打包后的文件将会被输出到在配置文件中设置的输出目录中。
以上为Webpack使用的基本步骤，下面以使用compressorjs为例，展示简单的图片压缩功能
图片压缩
1、导入compressorjs
npm install compressorjs
2、编辑index.js
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
<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>
