webpack初体验

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

本章节基于 Webpack3.0 测试通过。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。

1、创建第一个js文件cycle.js

function add(x,y){
	return x+y;
}
//指定导出该文件的方法
module.exports ={
	addFun:add
}

2、创建第二个js文件main.js

//把第一个js文件导入到该计算文件中
var calcExports = require('./cycle.js');
//调用第一个js文件的方法，并输出到控制台
console.log(calcExports.addFun(1,2));

3、创建webpack配置文件webpack.config.js

//这个文件就是webpack的默认配置文件，默认的名称为：webpack.config.js
//将来只需要在cmd面板上执行webpack就会自动去查找webpack.config.js中的内容进行相关的打包操作。

module.exports = {
  entry: './main.js', //webpack要打包的源文件
  output: {
    filename: './build.js' //打包以后输出的文件名称，./build.js代表在当前目录下输出
  }
};

4、创建访问html页面test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <!-- 引入打包后的js文件-->
  <script type="text/javascript" src="build.js"></script>
 </body>
</html>

5、打包后，会自动生成build.js文件，直接访问test.html后，就会在控制台输出相加计算的方法结果i哦。

猜你喜欢