安装
前提：安装了node.js和npm
- 进行全局安装 运行命令：npm install webpack -g
- 安装成功后可以运行命令：webpack -h查看当前安装的版本信息，以及可以使用的指令。
- 我们也可以将webpack安装到当前的项目依赖中，
1.确保进入项目目录
2.确定已经有 package.json，如果没有就通过命令：npm init 创建
3.安装webpack依赖：npm install webpack --save-dev
安装好的 package.json应该是下面这个样子：
{
"name": "first-demo",
"version": "1.0.0",
"description": "this is my first demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mihaibo",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.28.1",
"style-loader": "^0.17.0",
"webpack": "^2.5.1"
}
}
用webpack运行第一个打包程序
- 首先创建一个index.html文件和js入口文件entry.js文件
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1 id="app"></h1>
<!-- 注意这里引入的文件不是我们创建的文件，而是用webpack生成的文件 -->
<script src="bundle.js"></script>
</body>
</html>
entry.js:
document.getElementById("app").innerHTML = "这是我第一个打包成功的程序";
文件创建成功，可以开始进行打包，输入以下命令行：
webpack entry.js bundle.js
现在用浏览器打开index.html页面会看到：
这是我第一个打包成功的程序
接下来再添加一个js文件，first.js 内容如下：
var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);
接下来我们对entry.js进行一些修改：
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");
webpack again! 命令行输入：webpack entry.js boundle.js
打包成功后会显示日志：
Hash: 85cd213edf4c9ab6c8e7
Version: webpack 2.5.1
Time: 522ms
Asset Size Chunks Chunk Names
bundle.js 18.8 kB 0 [emitted] main
[0] ./first.js 108 bytes {0} [built]
[1] ./entry.js 157 bytes {0} [built]
刷新浏览器 会发现又加了一行文字。
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
