什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器
  ...

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

webpack安装

npm命令安装安装（-g表示全局安装）

npm install -g webpack

案例演示

1. 新建项目文件夹（webpackDemo），创建一个package.json文件，转到文件夹下 cd F:\webpackDemo ，执行初始化指令：

npm init

2. 我们在本项目中安装Webpack作为依赖包（-save-dve 自动把模块和版本号添加到devdependencies部分）

npm install --save-dev webpack

3. 安装jquery、layer依赖模块

npm install jquery -save-dve 
npm install layer -save-dve 

4. 根目录创建app、public文件夹，并创建如下文件：

• index.html --放在public文件夹中;
• message.js-- 放在app文件夹中;
• main.js-- 放在app文件夹中;

message.js文件代码如下：

module.exports = function() {
    var strongEle = document.createElement('strong');
    strongEle.html = "layer弹出层提示";
    return strongEle;
}

main.js文件代码如下，引入jquery模块与Greeter：

//main.js 
const jquery = require('jquery');
const greeter = require('./Greeter.js');

jquery("#root").append(greeter());