目录
1、webpack介绍:
webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS（含JSX）、coffee、样式（less/sass）、图片等都作为模块来处理和使用。它有着难以置信的配置和神奇的效果，大大提高了我们程序员的工作效率。举个例子：我们可以直接使用require（xxx）的形式来引入各模块，即使他们可能需要经过编译（比如JSX和sass），但我们无须再上面花费太多心思，webpack有着各种健全的加载器（loader）在默默处理这些事情。它可以部分代替Grunt和gulp的功能。
2、webpack的安装
当然常规直接使用npm的形式来安装:
$npm install webpack -g
npm 是Node.js的包管理工具，这个我就不作过多的解释了， 这个命令就是：全局安装webpack， -g 是全局安装的意思。
我们还可以直接安装到项目的依赖里，也就是写入package.json
npm init
npm install webpack --save-dev
3、配置文件webpack.config.js
按照常规来说，每个项目下都应该配置有webpack.config.js文件，它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一样，就是一个配置项，告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。
重点:什么是入口文件？模块打包的起点称之为入口起点（entry point）。入口起点告诉webpack从哪里开始，并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文（contextual root）或app第一个启动文件。
4、我们来作一个实例（Hello World！）
- 建立index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
- 建立main.js文件
document.write("<h1>Hello World</h1>");
- 建立webpack.config.js文件
module.exports = {
entry: "./main.js",
output: {
filename: 'bundle.js'
}
};
- 使用webpack命令进行打包，生成'bundle.js'文件。（若此时生成不了打包文件，使用npm install webpack-cli -g）
- 安装live-server，只要用npm install就可以安装了
npm install live-server -g
- 启动live-server预览
live-server
- 效果图
PS：若此时页面没有加载出来，请检查index.html链接的文件路径是否正确。