【webpack】使用webpack进行ES6开发
本文主要介绍的基本原理以及基于搭建前端项目工程化解决方案的思路。
目录：
为什么要用的安装的配置
上的小例子
1、入门
将项目中用到的一切静态资源都视之为模块，模块之间可以互相依赖。对它们进行统一的管理以及打包发布，其官方主页用下面这张图来说明的作用：
的目标就是对项目中的静态资源进行统一管理，为产品的最终发布提供最优的打包部署方案。
出自的团队，在网上找到了比较好的对它主要特性的归纳，如下：
是以 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。能被模块化的不仅仅是 JS 了。开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转等。扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot- ）的功能让人眼前一亮。 2、的安装
首先，建立目录文件，这里为了介绍方便，建立一个简单的如下的目录：
/web根目录
-es6main.jsPerson.js
index.html
webpack.config.js
es6 里面存放的是 ES6 风格的代码，main.js 是入口文件， index.html 是首页， ..js 是 的配置文件。
首先要安装node，接着在命令行，进入你的目录，输入如下命令：
npm install webpack -g
npm install webpack --sava-dev使用 babel 对 ES6 风格的代码进行转换，所以要安装babel- 加载器，在命令行输入如下命令：
npm install babel-loader --save-dev //安装 babel-loader
npm install babel-preset-es2015 --sava-dev //安装转码规则3、配置
打开 ..js，编辑如下：
var path = require('path');
module.exports = {entry: "./es6/main.js",//入口文件output: {//打包输出的文件path: __dirname,filename: "bundle.js"},module: {loaders: [{test: path.join(__dirname, 'es6'),loader: 'babel-loader',query: {presets: ['es2015']}}]}，resolve: {// 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee')extensions: ['', '.js', '.json', '.coffee']}
}.导出的对象即是 的配置对象，其中：
entry 是入口文件
是输出文件，这里的 给的是 .js，也就是当 运行完之后将生成一个 .js 文件
是使用到的所有加载器，在 gulp 里面我们都是使用的是 gulp 的一些插件比如 gulp-、gulp- 等等，在 里面类似，使用的是各种 ，详细的 列表在这里 。
4、相关代码
/es6/main.js
import Person from './Person.js';let p = new Person ('张三',20);
document.write(p.say());index.html
在这里就可以直接引用 .js 了。
<html>
<head><meta charset="utf-8"/><title>测试页面title>
head>
<body><script src="bundle.js">script>
body>
html>详情请移步 ES6学习
我最初接触是因为之前在实习的时候，要用react，当时接触过，当时的配置是师父配置的，具体配置见 之前博客
附上我个人觉着不错的入门教程：
1、深入浅出React（二）：React开发神器
2、一小时包教会 —— 入门指南
3、 how to
