Webpack介绍
webpack是一款前端模块化打包工具，通过webpack能够方便地对项目所依赖的模块、资源(图片、CSS、JS)进行打包输出。
webpack官网：Webpack
Webpack使用文档：Webpack文档
Webpack安装使用
1.使用npm安装webpack，不了解npm可以看一下我之前的文章NPM
//打开终端，cd到项目的目录下
npm init //初始化,需要设置相关参数，可一直默认
//npm init -y 加上参数-y可以直接默认初始化
//目录下多了一个package.json文件，这是npm的配置文件
//接着安装webpack
npm install webpack --save-dev
//安装完成后目录下多了个module文件夹，这是webpack所依赖的一些module模块
//后续添加进来的模块也存放在这个文件夹下
//--save-dev参数这里先埋个坑
Webpack实践
隐式依赖：
index.html:
//在没有使用webpack之前，我们的项目可能有这样的关系
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js:
//index.js文件中依赖html文件中引入的jQuery
$(document).ready(function(){
$('body').html("Hello,jQuery");
});
上面代码存在着隐式依赖，如果依赖项丢失或者加载的顺序不当，程序就会执行错误。再者，如果一些引入的js实际上并没有使用，同时也导致页面的HTTP请求数量增加，页面加载速度变慢。
试试Webpack
//安装jQuery
//npm install jquery --save
//这里的安装参数是--save
填坑--save-dev 和 --save
--save-dev是指将包信息添加在devDependencies，就是开发时所依赖的包
--save是指将包信息添加在Dependencies中，就是项目发布时所依赖的包
//修改之前的index.js文件
var $ = require('jquery');
$(document).ready(function(){
$('body').html("Hello,Webpack");
});
利用webpack打包js文件：
//webpack 打包入口文件 打包输出文件
webpack index.js dist/bundle.js
修改index.html文件：
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="dist/index.js"></script>
</body>
</html>
多模块依赖
假设我们上面的index.js文件又依赖于另一个data.js文件，那么我们这里就要用到模块化。
//index.js文件
var $ = require('jquery');
var str = require('data.js');
$(document).ready(function(){
$('body').html(str);
});
data.js:
var str = "Hello,Webpack";
module.exports = str;
运行webpack命令再次进行打包，在浏览器中就可以看到效果。
这里我们仅是利用了webpack对js的简单打包，如果我们的项目比较复杂，要打包js、css、图片等等资源，那就要用到webpack.config.js配置文件来统一管理。
下一篇文章介绍webpack.config.js的配置，请留意。
网友评论