webpack学习笔记
webpack官网：https://webpack.docschina.org/concepts/
1.概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。
2.安装
npm install webpack -g
npm install webpack-cli -g
#测试安装成功
webpack -v
webpack-cli -v
3.使用webpack
3.1 创建项目webpack-study
3.2创建一个名为modules的目录，用于放置JS模块等资源文件
3.3在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
// 暴露一个方法
exports.sayHi = function(){
document.write("<h1>webpack study</h1>");
}
3.4在modules下创建一个名为main.js的入口文件
var hello = require("./hello");
hello.sayHi();
3.5在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={
entry:'./modules/main.js',
output: {
filename:'./js/bundle.js'
}
}
3.6在项目目录下，执行命令webpack进行打包，项目目录下生成dist/js/bundle.js文件
3.7在项目目录下，新建index.html,内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="dist/js/bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
3.8打开浏览器，查看效果。
项目目录结构如下：
webpack-study
├── dist
│ └── js
│ └── bundle.js
├── index.html
├── modules
│ ├── hello.js
│ └── main.js
└── webpack.config.js