webpack学习第一篇(入门）

Webpack是什么？

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

161453372048661.jpg

webpack 的优势

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
   我们谈谈第一点。以 AMD/CMD 模式来说，鉴于模块是异步加载的，所以我们常规需要使用 define 函数来帮我们搞回调：

安装和配置(在项目下安装）

  $ npm install webpack --save-dev  

完成后你的项目中会生成一个node_modules的文件夹

  $ npm init 

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

1. package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

2.在项目中新建如下文件

1031000-976ba1a06fd0702f.png

index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）

Greeter.js只包括一个用来返回包含问候信息的html元素的函数。

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js用来把Greeter模块返回的节点插入页面。

//main.js 
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

正式使用Webpack

node_modules/.bin/webpack app/main.js public/bundle.js

结果如下

1031000-eb33708ec92d975c.png

可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,
可以看到Hi there and greetings!

                                未完...