MarkDownPad练习开始
好了，写点笔记。希望同样是菜鸟的同学，能有一点菜鸟的共鸣~懂得更多的砖头们，快些批评侄指正吧。。。。在此之前，网上有很多教程，首先找一个看看人家配置完成后的文件。有个印象。
webpack:项目构建工具，从开发环境的构建，到项目上线，全过程操作各模块（很多很多），简化和很大效率的提升开发者的开发过程。简化了操作步骤。
更多关于webpack工具的了解，请度娘官网，反正你知道这真的很强大。如果你已经知道了干什么用的，也知道它是那么强大，急需了解构建过程，请看下面。
1.安装webpack
直接了当：npm install webpack -g，建议全局安装，避免不必要的一些麻烦。
2.准备项目环境
首先，在项目文件夹中创建文件夹，app（自己命名），和public,我的了解，app是存放本地的文件数据，以及后面将要书写的js模块的，而public文件夹中存放的是要提交的数据文件。比如后面会打包好bundle.js 文件，是在这个文件夹目录下。
然后在app中创建两个js文件。一个main.js文件（主要的文件，入口文件），和一个Gretter.js文件（顾名思义。greeter是迎宾员的意思，这就是页面开始的页面开始的一个问候信息。也可以是自己写的模块，引入到main.js中）。再在public中创建一个index.html文件。这个文件也是要上传到浏览器的，因为你要查看你的项目的额显示，这应该就是一个模板了。
greeter.js中，向外暴露出一个方法。使用modele.exports={}的形式。然后就可以在main.js中通过var greeter=require("greet")引入了。
module.exports={
function(){
var greet=document.createElement("div");
greet.textContext="start a webpack project";
return greet
}
}
在本项目中安装webpack依赖包，后面会讲到，要打包文件的话，需要webpack依赖包进打包文件。所以需要本地安装webpack。然后你会看到你个module_nodles的文件夹出现了。
这个时候你就可以进行打包了。使用webpack /app/main.js /public/bundle.js;就完成了以第一次的简单打包。
3.打包
了解上面说的这种打方式就可以了，但这样打包每次都要输入入口和output的文件地址文件名。很麻烦而且容易出错。所以就需要我们看到的package.json文件和webpack.config.js文件了。
首先讲packages.json，就是一个包依赖的管理文件（我的理解），我们在里面进行配置，就可以进行相应的打包方法了。（还有一点，我们在github上下载项目是。项目中是不会有module_nodles文件夹的，因为里面东西太多了，太大了。这时候我们就需要package.json了，直接命令行npm install就可以逐条安装配置文件package.json 中的那些依赖项了。）
在script项中。添加start:"webpack";依赖会自动根据你的webpack全局环境生成；这样我们就直接可以输入npm start来进行打包了。不需要输入文件名了。
再说webpack.config.js文件，看过配置文件的。都知道有个entry和output项目，这两个就是打包的入口和输出文件。具体的书写格式，理解加记忆：
module.exports={
entry:__diename+"./app/main.js",
output:{
path:__dirname+"./public",
filename:"bundle.js"
}
}
这样就配置好了入口和出口的文件及地址。现在就可以直接使用命令：webpack进行打包了。
4.调试配置
我自己还没有试验调试配置，据我学习了解，调试配置是为了在打包过程中，出现错误后，生成一个debug的文件，让我们很清晰地了解出现的错误。
5.服务器创建
当我们的文件打包好了，需要在服务器上运行起来。因为在服务器上运行起来，能模拟真实的环境。避免再项目上线后出现问题。一些公司都是有自己的测试服务器的。直接把地址配置成你的测试服务器，就可以直接查看运行结果了。
webpack服务器，需要本地安装，npm install –save-dev webpack-dev-server就可以安装成功。这样你就可以在webpack.config.js中进行配置了。我看到别人是这样的：
`"dev-server":"dev-server local.xxxx.cc --port:3333"`;
这样完成配置，在命令行中，直接npm run dev-server，既可以将服务器跑起来，你的项目就可以运行在服务器上了。
创建完成服务器之后，要在webpack的配置文件中进行配置，
dev-server:{
contentBase:"./publid" //需要加载的文件
color:true， // 命令行中输出的信息颜色
tistoryFallback:true //是否跳转
inline:true //是否实时更新。
}
6.接下来就是loader了
关于loader，首先你知道这是非常强大的，你可以将其理解为解译模块，因为他也是在module中进行配置的。比如页面使用的额sass.less.ES6语法还有react的JSX语法等等，在现在的浏览器环境下是不能解析的，所以需要进行解译。那就需要这些模块来完成响应的功能。
记住，loader需要本地安装，比图style-loader css-loader等等，都需要npm install的方式安装。然后再配置文件中进行配置。方法自己看别人的配置文件就能明白了。
loader的配置是在moudle中,在webpack.config.js中添加module,loader是以数组的形式存在的:
module:{
loaders:[
test:/\.json$/,
loader:"json"，
]
}
其中test是正则验证，文件后缀为.json的文件。loader是loader的名称，这里是jsonloader。
更多的关于loader，自己查看配置文件结合自己需求npm install –save-dev loader名 安装。可以安装常用的style-loader 和 css-loader.
-
补充：
需要插件自行安装，查看教程，是webpack自带插件还是需要安装，需要安装的需要在webpack.config.js中进行引用，然后进行配置。
webpack自身的插件只需要进行配置就可以。具体配置过程避免出错，找一个配置好的文件对比查看。
对了，写这个做笔记也是为了练习下markdown语法：
语法挺简单的，很容易学，你看到之后也可以学习一下
对于写文档真的很好用。
再练习下表格吧，也很简单：
markdown webpack start 2.0 dev-server npm start 区块> 区段 列表+、-、* 加粗强调** ** 斜体*开发* 分隔———- 标题## 标题### 按照#号个数依次增至h6标题