Webpack

什么是Webpack？

Webpack 是代码编译工具，有入口、出口、loader和插件。webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部构建一个依赖图（dependency graph），此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

安装Webpack

Webpack是一款模块加载器兼打包工具，他能够把各种资源，如JS、JSX、ES6、SASS、图片等都作为模块来处理和使用。

安装命令：

npm install webpack -g   // 打包工具

npm install webpack-cli -g  // 客户端

安装成功后，输入一下代码测试安装是否成功

webpack  -v

webpack-cli  -v

使用webpack

在modules下创建模块文件，用于编写JS模块相关代码

exports.sayHI = function(){       //导出一个方法

document.write("<h1>webpack学习</h1>")

}

在modules下创建一个main.js的主入口文件，用于打包时设置entry属性

var  hello = require（"./hello"）

hello.sayHi()

在项目目录下创建webpack.config.js配置文件，使用webpack命令打包（以管理员身份输入）

module.exports = {

// 定义程序入口

entry：“./modules/main.js”

mode:"development"

//定义导出文件的文件路径

output：{

filename：“.js/bundle.js”

}

}

在项目路径下创建HTML页面，导入webpack打包后的JS文件

<script src = "dist/js/bundle.js"></script>

运行HTML结果