初识Webpack

Webpack前端必备模块打包机
一、webpack是什么？
1、模块化（将项目模块化）；
2、自定义文件或npm install（模块化文件方式两种）；
3、将静态文件模块化；
4、借助于插件和加载器；

二、webpack的优势
1、代码分离；
2、装载器（css，sass，jsx等）：
案例：loader

• CSS & Style
• Sass & Less ：CSS
• Jsx（React）：转换成JS
• Babel ：把语法转换成浏览器可以识别的语法
• Coffee
• TypeScript
• EJS，Pug，Handlebars
• json

3、智能解析（require("./template/"+names+".ejs")）；

三、安装流程
1、npm install -g webpack //全局安装webpack
2、npm install webpack-dev-server //准备一个服务器；实时监听代码状态

webpack工作流程认识
1、自定义文件(cats.js)一>入口文件(app.js)
eg：
cats.js

var cats=['dave','henry','martha'];
module.exports=cats;  //对外开放，即让入口文件可以使用cats.js文件中的代码

app.js

var cats=require('./cats.js'); //使用require引入cats.js文件

2、当使用webpack时，将项目中使用到的所有文件都放到一个bundle.js文件中；