1.前言

初次接触webpack 参考了网上的教程，首先介绍一下webpack：我的理解：强大的打包工具，帮助实现项目的模块化

1.1 为什么使用webpack

特色	优点
模块化	实现代码的按需加载
代码比如样式和图片的压缩	解决大型网站或者应用加载慢的问题
丰富的loader	可以加载多种类型的文件整合到js文件中
丰富的资源	可以整合第三方库

2.开搞

2.1开始配置

全局安装

npm install webpack -g

建立项目文件夹
结构如下：

![ ![ ![Screen Shot 2017-01-24 at 1.14.17 AM.png](https://img.haomeiwen.com/i4289237/fb40df58bb4cf173.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://img.haomeiwen.com/i4289237/4e5ad59ea986cf23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://img.haomeiwen.com/i4289237/ba7c77999e7c51d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

（这里的package.json用来阐述依赖的文件等信息，可以通过命令行直接建立）

npm init 
npm install //创建package.json,根据提示一步步设置相应信息即可

2.2根据git资源及阮一峰react教程，我们将blog留言板功能划分为3个组件，messageBoard.js messageForm.js messageList.js 并放置在components文件夹中。

代码详见：github link

2.3 react组件编写完成后，在html文件夹中创建用户界面，index.html

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack with react</title>
    </head>
    <body>
        <div id="container"></div>
        <script src="../js/dist/bundle.js"></script>//这里的bundle.js文件是css文件，js文件通过webpack加载器整合后生成输出到dist文件夹的
    </body>
    </html>

2.4 webpack文件配置

编辑webpack.config.js

var path = require('path');

    module.exports = {
        entry: './js/entry.js',  ／／入口文件位置
        output: {
            path: path.join(__dirname, 'js/dist'),
            filename: 'bundle.js'
        },    ／／输出文件位置及文件名称
        module: {
            loaders: [{
                test: /\.js|jsx$/,
                loader: 'jsx?harmony' 这里是webpack最重要的部分，告诉文件用什么加载处理。这里加载的是jsx！
            }]
        }
  }