一、安装
1、安装node.js,Webpack 需要 Node.js v0.6 以上支持
2、使用npm(软件包管理 )安装webpack
(1)全局安装
npm install webpack -g
(2)安装到项目依赖中
::创建package.json文件
npm init
::安装webpack依赖
npm install webpack --save-dev
二、使用webpack
1、创建静态页面index.html js入口文件entry.js
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--build.js文件是打包后生成文件-->
<script src="build.js"></script>
</body>
</html>
// entry.js
document.write('It works.')
2、编译打包
webpack entry.js build.js
用浏览器打开
index.html
将会看到 It works.
3、添加模块
//创建module.js
module.exports = 'It works from module.js';
//entry.js
document.write('It works');
document.write(require('./module.js')); //引入新建模块
重新打包:
webpack entry.js build.js
刷新页面看到变化
It works.It works from module.js.
总结:webpack会分析入口文件,将所有模块打包到build.js。webpack会给每个模块分配一个唯一的id,通过这个id索引和访问模块。页面启动时,会先执行entry.js中的代码,其他模块会在运行require时执行。