webpack 读取文件夹下的文件_webpack基本介绍及使用

1.什么是webpack

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

从上图看出，webpack可以将多种静态资源js，css，less转换成一个静态文件，减少页面的请求。

2.webpack安装

全局安装：

npm install webpack -g

npm install webpack-cli -g

查看版本号：

webpack -v

3.快速入门

3.1 js打包

1.创建src文件，src里创建bar.js

//bar

exports.info = function(str){

document.write(str);

}

2.src里创建logic.js

//logic

exports.add = function(a,b){

return a+b;

}

3.src里创建main.js

//main.js

var bar = require("./bar");

var logic = require("./logic");

require('./css1.css');

bar.info("hello world! "+logic.add(100,200));

4.创建配置文件webp