华山资源网

webpack入门必知必会
网络编程 2024/11/20 佚名
3 1

前言

这是我第一篇介绍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基础知识的印象。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com