Webpack简单使用
Posted milovetingting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack简单使用相关的知识，希望对你有一定的参考价值。
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" />
<br /><br />
<a id="download" >下载</a>
</body>
<script src="dist/bundle.js"></script>
</html>
Android代码搬运工一枚，欢迎留言讨论交流！
个人主页：http://www.milovetingting.cn
个人主页：http://www.milovetingting.cn
以上是关于Webpack简单使用的主要内容，如果未能解决你的问题，请参考以下文章