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