这篇文章主要介绍webpack如何实现拆分、打包、压缩，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！步骤1.传统项目中的问题在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这
这篇文章主要介绍webpack如何实现拆分、打包、压缩，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
步骤
1.传统项目中的问题
在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：
index.html
<html>
<head>
<title>传统项目</title>
<script src="https://code.Jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>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="dist/bundle.js"></script>
</body>
</html>这里我们的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!”。
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如何实现拆分、打包、压缩”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！
--结束END--
本文标题: webpack如何实现拆分、打包、压缩
本文链接: https://www.lsjlt.com/news/78987.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0