DDR爱好者之家

webpack入门必知必会
站长资源 2024/11/28 佚名
25 1538
DDR爱好者之家 Design By 杰米

前言

这是我第一篇介绍webpack的文章，先从一个入门教程开始吧，后续会有更多相关webpack的文章推出。

首先什么是webpack？如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。

本文作为一篇入门教程，这里先从webpack最简单的3招开始介绍，即拆分、打包、压缩。

webpack入门必知必会

步骤

1.传统项目中的问题

在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：

index.html

<html>
 <head>
 <title>传统项目</title>
 <script src="/UploadFiles/2021-04-02/jquery-2.2.4.js">


app/index.js





function main() {
 $('body').html('hello world!');
}
main();






 以上示例中，脚本之间存在着隐式依赖关系。


index.js取决于被包括在页面运行之前的jQuery，它只是假设有一个全局变量$的存在。


这样管理JavaScript项目有一些问题：


如果依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。


如果包含依赖项但没有使用，那么浏览器必须下载很多不必要的代码。


所以为了解决以上问题，我们需要使用webpack来实现一些改变。


2.准备


首先我们得在项目中安装webpack，我们打开命令行工具运行：





mkdir demo && cd demo // 新建demo文件夹并打开
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安装webpack2.0版本，mac系统可能需要添加sudo命令






以上使用的npm命令需要安装node.js，可以点击这里安装即可：node.js


为了改进上方传统项目中的不足，我们这里还需要安装jQuery：


npm install --save jQuery // 安装jQuery


3.改变


改变后的index.js





var $ = require('jquery');
function main() {
 $('body').html('hello world!');
}
main();






这里我们可以直接在index.js里引用jQuery，index.js明确要求jQuery的存在，这样就不存在隐式依赖的问题（没有全局污染）。


改变后的index.html





<html>
 <head>
 <title>webpack项目</title>
 </head>
 <body>
 <script src="/UploadFiles/2021-04-02/bundle.js">


这里我们的index.html文件只引入了最终打包后的bundle.js。现在运行webpack命令将index.js输出为bundle.js。


运行命令：webpack app/index.js dist/bundle.js





webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [1] ./app/index.js 83 bytes {0} [built]





最终我们在浏览器中打开index.html页面可以看到输出的“hello world!”。


webpack入门必知必会


4.拆分


现在如果我们index.js中的”hello world!”字符串需要放到另外一个hello.js中，然后在index.js中引入使用的话，这就涉及到webpack模块拆分的功能。


app/index.js





var $ = require('jquery');
var str = require('./hello.js');
function main() {
 $('body').html(str);
}
main();






app/hello.js





var str = 'hello world!';
module.exports = str;






我们在hello.js中通过module.exports导出str变量，然后在index.js通过require导入同样可以实现浏览器中输入“hello world!”的效果，当然我们需要重新运行下webpack命令：webpack app/index.js dist/bundle.js


5.打包


其实在上面我们已经使用了打包命令：


webpack app/index.js dist/bundle.js


其中的app/index.js即为打包的入口文件，而dist/bundle.js为输出文件。


但是我们会发现这样的命令不利于我们复杂项目配置的使用，对于更复杂的配置，我们可以利用配置文件webpack.config.js来统一管理。


我们可以在demo文件夹下新建webpack.config.js配置文件：





module.exports = {
 entry: './app/index.js',
 output: {
 filename: 'bundle.js',
 path: './dist'
 }
}





上方配置中的entry就是我们的入口文件，可以有多个入口文件，而output即为webpack打包的输入对象，filename为输出文件名，path为输出路径。


如此我们运行命令行：


webpack --config webpack.config.js


同样可以生成打包目录dist及打包文件bundle.js。


当然你也可以直接运行简化的命令：


webpack


webapck会自动去寻找当前目录下的webpack.config.js文件。


6.压缩


上一步我们利用webpack命令将多个多件打包到了一个bundle.js的文件中，但是并未进行压缩，你可以打开bundle.js进行查看。


而如果我们需要对打包后的代码进一步压缩处理，我们可以运行命令：


webpack -p


这时我们可以来进行下打包和压缩的文件大小对比


打包命令：webpack





webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]






输出的bundle.js整个文件大小为270 kB。


压缩命令：webpack -p





webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
 Asset Size Chunks Chunk Names
bundle.js 88.3 kB 0 [emitted] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]





输出的bundle.js整个文件大小为88.3 kB。


很明显，文件被压缩了。


7.进一步压缩优化


上方我们通过webpack的压缩命令将文件打包并压缩了，但是对于webpack -p压缩后的文件来说其实还有压缩的余地。如果你使用的是webpack1.0，那么你可以在配置文件中添加plugins配置项，并且加入如下插件：





var webpack = require('webpack');
module.exports = {
 ...
 plugins:[
 // 去除代码块内的告警语句
 new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false
 }
 }),
 // 优先考虑使用最多的模块，并为它们分配最小的ID
 new webpack.optimize.OccurenceOrderPlugin()
 ]
 ...
}






而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress选项默认为false，并且OccurrenceOrderPlugin默认启用，所以无需进行配置。


结语


本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米