webpack安装使用

一、安装
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时执行。
 
 
posted @ 2017-03-16 17:03  Lily~~  阅读(313)  评论(0编辑  收藏  举报